{"id":13481374,"url":"https://github.com/ignoreintuition/v-chart-plugin","last_synced_at":"2025-03-27T12:30:47.494Z","repository":{"id":37706351,"uuid":"146386019","full_name":"ignoreintuition/v-chart-plugin","owner":"ignoreintuition","description":"Easily bind a chart to the data stored in your Vue.js components.","archived":false,"fork":false,"pushed_at":"2023-03-15T11:10:28.000Z","size":21566,"stargazers_count":198,"open_issues_count":17,"forks_count":33,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-04-14T13:04:48.087Z","etag":null,"topics":["chart","component","d3","d3-visualization","d3js","d3v4","datavisualization","graph","hacktoberfest","javascript","plugin","vue","vue-components","vuejs"],"latest_commit_sha":null,"homepage":"https://resurgencewebdesign.com/v-chart/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ignoreintuition.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-28T03:19:34.000Z","updated_at":"2024-05-04T05:32:16.605Z","dependencies_parsed_at":"2024-05-04T05:42:26.057Z","dependency_job_id":null,"html_url":"https://github.com/ignoreintuition/v-chart-plugin","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ignoreintuition%2Fv-chart-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ignoreintuition%2Fv-chart-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ignoreintuition%2Fv-chart-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ignoreintuition%2Fv-chart-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ignoreintuition","download_url":"https://codeload.github.com/ignoreintuition/v-chart-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245844811,"owners_count":20681783,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","component","d3","d3-visualization","d3js","d3v4","datavisualization","graph","hacktoberfest","javascript","plugin","vue","vue-components","vuejs"],"created_at":"2024-07-31T17:00:51.313Z","updated_at":"2025-03-27T12:30:47.015Z","avatar_url":"https://github.com/ignoreintuition.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Charts","Components \u0026 Libraries","UI Components","javascript","UI Components [🔝](#readme)"],"sub_categories":["UI Components","Charts"],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://resurgencewebdesign.com/v-chart-plugin-demo/\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/5210420/46899802-2d7db800-ce66-11e8-896c-115ce3dcfb98.png\" width=\"200\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\n  A plugin for adding charts to Vue\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/release/ignoreintuition/v-chart-plugin.svg\"\n         alt=\"version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"#\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/ignoreintuition/v-chart-plugin.svg\"\n         alt=\"version\"\u003e\n  \u003c/a\u003e\n\n\u003c/p\u003e\n\u003ch2 align=\"left\"\u003e Table of Contents \u003c/h2\u003e\n\u003cul align=\"left\"\u003e\n  \u003cli\u003e\u003ca href=\"#purpose\"\u003ePurpose\u003c/a\u003e \u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e \u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#performance-consideration\"\u003ePerformance Consideration\u003c/a\u003e \u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#build-setup\"\u003eBuild Setup\u003c/a\u003e \u003c/li\u003e\n\u003c/ul\u003e\n\n![Screenshot](https://user-images.githubusercontent.com/5210420/48656734-1eef6700-e9f7-11e8-8225-236db25fa167.gif)\n\n## Purpose\n\nThis plugin is designed to allow Vue.js developers to incorporate fully reactive and customizable charts into their applications.  The plugin is built off of the D3.js JavaScript library for manipulating documents based on data.  By binding data from your components, you can create complex charts and graphs that respond to changes in your application.  Vue.js lifecycle events will trigger the charts to update and maintain two-way binding between your charts and your data.  By adding in a state management (such as Vuex) you can additionally persist state across an entire application.\n\nV Chart Plugin is built using Vue.js' component architecture.  This will allow the chart to be a first class citizen of your Vue.js application.  Combining multiple charts allows you to create complex dashboards and enable deeper insights into your data.  All aspects of the charts can be configured to allow for full customization of your graphs along with the ability to style the SVG elements using the classes and IDs generated for each individual canvas element.  \n\nBy adding additional charts into the import folder and importing them into the v-chart-plugin.js you can include any custom charts to use with Vue.js.  Using the JavaScript API you can hook into the specific methods in the API and create a reusable component that can persist across your application.\n\n[Demo Page](https://resurgencewebdesign.com/v-chart-plugin-demo/)\n\n## Usage\n\nThese instructions are assuming you are using Vue CLI to create your template.  Include the plugin in your main.js:\n\n```JavaScript\nimport Chart from 'v-chart-plugin'\n\nVue.use(Chart);\n```\n\nWithin your component you will need to include an object with: title, selector, width, height, and datapoints to pass to the component.  Data can be passed as an array or as an array of objects:\n\n```JavaScript\nexport default {\n  name: 'example',\n  data () {\n    return {\n      chartData: {\n        chartType: 'barChart',\n        selector: 'chart',\n        title: 'Important Data',\n        width: 300,\n        height: 200,\n        data: [120, 140, 70, 90, 110, 65, 210]      \n      }\n    }\n  }\n}\n```\n\nIf passed as an array of objects you will need to define which attribute to use as your metric / dimension\n\n```JavaScript\nexport default {\n  name: 'example',\n  data () {\n    return {\n      chartData: {\n        chartType: \"vBarChart\",\n        selector: \"chart\",\n        title: \"Important Data\",\n        width: 400,\n        height: 200,\n        metric: 'count', // for two or more metrics pass as an array ['count', 'pyCount']\n        data: [\n          {'count': 120,\n           'fruit': 'apples'}, \n          {'count': 250,\n           'fruit': 'oranges'}\n        ]\n      }\n    }\n  }\n}\n```\nBubble Charts require three metrics (v1, v2, and v3).  These should be passed as metrics\n\n```JavaScript\nexport default {\n  name: 'example',\n  data () {\n    return {\n      chartData: {\n        chartType: \"bubbleChart\",\n        selector: \"chart\",\n        title: \"Important Data\",\n        width: 400,\n        height: 200,\n        metric: ['count', 'pyCount', 'revenue']\n        data: [\n          {'count': 120,\n           'pyCount': 115,\n           'revenue': 170,\n           'fruit': 'apples'}, \n          {'count': 250,\n           'pyCount': 255,\n           'revenue': 325,\n           'fruit': 'oranges'}\n        ]\n      }\n    }\n  }\n}\n```\n\n### Overrides\nIf you need to override any of the default values of the charts (pallette colors, ticks, margins, etc) you can pass an overrides object to you chartData.\n\n```JavaScript\n      vBarChartData: {\n        chartType: \"vBarChart\",\n        ...   \n        overrides: {\n           palette: {\n            fill: 'red',\n          },\n          y: {\n            ticks: 20,\n          },\n        }\n      },\n```\n\n### Legends\nLegends are turned off by default.  You can add a legend to a chart by including a legends objects in your chartData as such:\n\n```JavaScript\nchartData: {\n  chartType: \"vBarChart\",\n  ...\n  legends: {\n    enabled: true,\n    height: 25,\n    width: 50,\n  }\n}\n```\n\n### Gridlines\nGridlines are turned off by default.  You can include and configure your gridlines via the configuration object:\n\n```JavaScript\nchartData: {\n  chartType: \"barChart\",\n  ...\n  grid: {\n    enabled: true,\n    gridTicks: 25,\n  }\n}\n```\n\n### Goals\nGoals are used to place a line on your graph showing where your target is for the period:\n\n```JavaScript\nchartData: {\n  chartType: \"lineGraph\",\n  ...\n  goal: 500,\n}\n```\n\n### Labels\nLabels are assigned to the x and y axis:\n\n```JavaScript\nchartData: {\n  chartType: \"lineGraph\",\n  ...\n  label: true,\n}\n```\n\n### Chart types currently supported:\n* barChart: a chart in which the numerical values of variables are represented by the width of rectangles of equal height.\n* vBarChart: a chart in which the numerical values of variables are represented by the height of rectangles of equal width.\n* lineGraph: a graph which displays information as a series of data points called 'markers' connected by straight line segments. \n* scatterPlot: a graph in which the values of two variables are plotted along two axes, the pattern of the resulting points revealing any correlation present.\n* pieChart: a chart in which a circle is divided into slices to illustrate proportion\n* areaChart: a chart which displays graphically quantitative data\n* bubleChart: a bubble chart is a variation of a scatter chart in which the data points are replaced with bubbles, and an additional dimension of the data is represented in the size of the bubbles.\n\n### Charts that support two or more metrics\n* barChart\n* vBarChart\n* lineGraph\n\nLastly you will need to add the component and bind your data\n\n```\n\u003cv-chart v-bind:chartData=\"chartData\"\u003e\u003c/v-chart\u003e\n```\n\nIf you wish to style the components of the chart you can via the selectors:\n\n```html\n\u003cstyle\u003e\n  .chart-barChart {\n    fill:blue;\n  }\n\u003c/style\u003e\n```\n## Performance Consideration\n\nBy default all charts are imported into v-chart-plugin.js.  This allows all charts to share one common interface.  If you are only using a few select charts in your implementation you can remove those unused charts from the import statements in the v-chart-plugin.js.  \n\n```JavaScript\nimport barChart     from './import/barChart' \nimport vBarChart    from './import/vBarChart'\nimport lineGraph    from './import/lineGraph'\nimport scatterPlot  from './import/scatterPlot'\nimport pieChart     from './import/pieChart'\nimport areaChart    from './import/areaChart'\n```\n\n## Build Setup\n\n``` bash\n# install dependencies\nyarn  \n\n# serve with hot reload at localhost:8080\nyarn serve\n\n# build for production with minification\nyarn build\n\n```\n\nFor a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fignoreintuition%2Fv-chart-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fignoreintuition%2Fv-chart-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fignoreintuition%2Fv-chart-plugin/lists"}