{"id":17161151,"url":"https://github.com/j-t-mcc/vue3-chartjs","last_synced_at":"2025-04-12T06:12:32.647Z","repository":{"id":44606187,"uuid":"315157134","full_name":"J-T-McC/vue3-chartjs","owner":"J-T-McC","description":"Vue3 wrapper for ChartJS","archived":false,"fork":false,"pushed_at":"2025-02-13T00:24:54.000Z","size":1100,"stargazers_count":118,"open_issues_count":2,"forks_count":24,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-12T06:12:22.651Z","etag":null,"topics":["chartjs","chartjs3","charts","vue","vue3","vue3-chartjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/J-T-McC.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":"2020-11-22T23:57:51.000Z","updated_at":"2025-02-13T00:10:24.000Z","dependencies_parsed_at":"2024-06-18T16:56:16.366Z","dependency_job_id":"882ac4c8-6b82-4681-a340-cbf179aea5d5","html_url":"https://github.com/J-T-McC/vue3-chartjs","commit_stats":{"total_commits":56,"total_committers":4,"mean_commits":14.0,"dds":0.1607142857142857,"last_synced_commit":"7a6f0f20c504f1b7987ac0ec990d37f6f7803fe3"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/J-T-McC%2Fvue3-chartjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/J-T-McC%2Fvue3-chartjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/J-T-McC%2Fvue3-chartjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/J-T-McC%2Fvue3-chartjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/J-T-McC","download_url":"https://codeload.github.com/J-T-McC/vue3-chartjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248525138,"owners_count":21118619,"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":["chartjs","chartjs3","charts","vue","vue3","vue3-chartjs"],"created_at":"2024-10-14T22:27:19.711Z","updated_at":"2025-04-12T06:12:32.616Z","avatar_url":"https://github.com/J-T-McC.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue3 ChartJS Wrapper\n\n[![Coverage Status](https://coveralls.io/repos/github/J-T-McC/vue3-chartjs/badge.svg?branch=main)](https://coveralls.io/github/J-T-McC/vue3-chartjs?branch=main)\n[![Tests](https://github.com/J-T-McC/vue3-chartjs/actions/workflows/run-tests.yml/badge.svg)](https://github.com/J-T-McC/vue3-chartjs/actions/workflows/run-tests.yml)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/J-T-McC/vue3-chartjs/pulls)\n![npm](https://img.shields.io/npm/dt/@j-t-mcc/vue3-chartjs)\n\nBasic [ChartJS 4](https://www.chartjs.org/) wrapper for [Vue3](https://v3.vuejs.org/)\n\nFor ChartJS 2, see [v0.3.0](https://github.com/J-T-McC/vue3-chartjs/tree/0.3.0)\n\nFor ChartJS 3.1, see [v1.3.0](https://github.com/J-T-McC/vue3-chartjs/tree/v1.3.0)\n\n## Requirements\n\n- Vue 3\n- ChartJS 4\n\n## Installation\n\n```shell script\nyarn add chart.js @j-t-mcc/vue3-chartjs\n\nnpm install chart.js @j-t-mcc/vue3-chartjs\n```\n\n## Configuration\n\nComponent props use the same structure as ChartJS arguments and are passed as-is to the instance of ChartJS.\n\nChartJS charts are responsive by default. If you wish to have a fixed sized chart, you can set the optional `height` and `width` properties, paired with setting responsive to `false` in the `options` property.  \n\n```js\n  props: {\n    type: {\n      type: String, \n      required: true\n    },\n    height: {\n      type: Number,\n      required: false,\n      default: null\n    },\n    width: {\n      type: Number,\n      required: false,\n      default: null\n    },\n    data: {\n      type: Object,\n      required: true\n    },\n    options: {\n      type: Object,\n      default: () =\u003e ({})\n    },\n    plugins: {\n      type: Array,\n      default: () =\u003e []\n    }\n  }\n```\n\n## Sandbox Examples\n\n* [Pie Chart](https://codesandbox.io/s/pie-chart-848by?file=/src/App.vue)\n* [Doughnut Chart](https://codesandbox.io/s/doughnut-chart-g7il4?file=/src/App.vue)\n* [Bar Chart](https://codesandbox.io/s/bar-chart-kog87?file=/src/App.vue)\n* [Radar Chart](https://codesandbox.io/s/radar-chart-j2dyp?file=/src/App.vue)\n* [Line Chart with Plugins](https://codesandbox.io/s/plugin-example-o4y3q?file=/src/App.vue)\n* [Events \u0026 Exports](https://codesandbox.io/s/events-and-exports-q5g9k?file=/src/App.vue)\n\nView the [ChartJS Docs](https://www.chartjs.org/docs/latest/samples/bar/vertical.html) for more examples.\n\n## Events\n\nA default event hook plugin is injected into each chart object and emits the following events:\n[ChartJS events](https://www.chartjs.org/docs/latest/developers/plugins.html#plugin-core-api)\n\nEvent listeners are converted to camelcase in Vue 3. Events marked as \"cancellable\" in the ChartJS documentation can be \"\ncanceled\" by calling the preventDefault method on the event parameter available in your event function.\n\n## Methods\n\nThis library only implements a few ChartJS methods for some common interactions and are available by reference:\n\n```javascript\nchartRef.value.update(animationSpeed = 750)\nchartRef.value.resize()\nchartRef.value.destroy()\n```\n\nIf you require additional access to ChartJS functionality, you can interact directly with the ChartJS object via the\nchartJSState attribute by reference:\n\n```javascript\nconst base64Image = chartRef.value.chartJSState.chart.toBase64Image()\n```\n\nSee the [ChartJS Docs](https://www.chartjs.org/docs/latest/developers/api.html) for more\n\n## Examples\n\nBelow are some basic chart examples to get started.\n\n### Simple Chart\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv style=\"height:600px;width: 600px; display: flex;flex-direction:column;\"\u003e\n    \u003cvue3-chart-js\n        :id=\"doughnutChart.id\"\n        :type=\"doughnutChart.type\"\n        :data=\"doughnutChart.data\"\n        @before-render=\"beforeRenderLogic\"\n    \u003e\u003c/vue3-chart-js\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Vue3ChartJs from '@j-t-mcc/vue3-chartjs'\n\nexport default {\n  name: 'App',\n  components: {\n    Vue3ChartJs,\n  },\n  setup () {\n    const doughnutChart = {\n      id: 'doughnut',\n      type: 'doughnut',\n      data: {\n        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],\n        datasets: [\n          {\n            backgroundColor: [\n              '#41B883',\n              '#E46651',\n              '#00D8FF',\n              '#DD1B16'\n            ],\n            data: [40, 20, 80, 10]\n          }\n        ]\n      }\n    }\n\n    const beforeRenderLogic = (event) =\u003e {\n      //...\n      //if(a === b) {\n      //  event.preventDefault()\n      //}\n    }\n\n    return {\n      doughnutChart,\n      beforeRenderLogic\n    }\n  },\n}\n\u003c/script\u003e\n```\n\n### Updating chart\n\nHere is an example of updating the data, labels and title in a chart.\n\nSee the [ChartJS docs](https://www.chartjs.org/docs/latest/developers/updates.html) for more details on updating charts.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv style=\"height:600px;width: 600px;display: flex;flex-direction:column;\"\u003e\n    \u003cvue3-chart-js\n        :id=\"doughnutChart.id\"\n        ref=\"chartRef\"\n        :type=\"doughnutChart.type\"\n        :data=\"doughnutChart.data\"\n        :options=\"doughnutChart.options\"\n    \u003e\u003c/vue3-chart-js\u003e\n\n    \u003cbutton @click=\"updateChart\"\u003eUpdate Chart\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { ref } from 'vue'\nimport Vue3ChartJs from '@j-t-mcc/vue3-chartjs'\n\nexport default {\n  name: 'App',\n  components: {\n    Vue3ChartJs,\n  },\n  setup () {\n    const chartRef = ref(null)\n\n    const doughnutChart = {\n      id: 'doughnut',\n      type: 'doughnut',\n      data: {\n        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],\n        datasets: [\n          {\n            backgroundColor: [\n              '#41B883',\n              '#E46651',\n              '#00D8FF',\n              '#DD1B16'\n            ],\n            data: [40, 20, 80, 10]\n          }\n        ]\n      },\n      options: {\n        plugins: {}\n      }\n    }\n\n    const updateChart = () =\u003e {\n      doughnutChart.options.plugins.title = {\n        text: 'Updated Chart',\n        display: true\n      }\n      doughnutChart.data.labels = ['Cats', 'Dogs', 'Hamsters', 'Dragons']\n      doughnutChart.data.datasets = [\n        {\n          backgroundColor: [\n            '#333333',\n            '#E46651',\n            '#00D8FF',\n            '#DD1B16'\n          ],\n          data: [100, 20, 800, 20]\n        }\n      ]\n\n      chartRef.value.update(250)\n    }\n\n    return {\n      doughnutChart,\n      updateChart,\n      chartRef\n    }\n  },\n}\n\u003c/script\u003e\n\n```\n\n### Exporting Chart as PNG\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv style=\"height:600px;width: 600px; display: flex;flex-direction:column;\"\u003e\n    \u003cbutton type=\"submit\" @click=\"exportChart\"\u003eExport Chart as PNG\u003c/button\u003e\n    \u003cvue3-chart-js\n        :id=\"doughnutChart.id\"\n        ref=\"chartRef\"\n        :type=\"doughnutChart.type\"\n        :data=\"doughnutChart.data\"\n    \u003e\u003c/vue3-chart-js\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { ref } from 'vue'\nimport Vue3ChartJs from '@j-t-mcc/vue3-chartjs'\n\nexport default {\n  name: 'App',\n  components: {\n    Vue3ChartJs,\n  },\n  setup () {\n    const chartRef = ref(null)\n    const doughnutChart = {\n      id: 'doughnut',\n      type: 'doughnut',\n      data: {\n        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],\n        datasets: [\n          {\n            backgroundColor: [\n              '#41B883',\n              '#E46651',\n              '#00D8FF',\n              '#DD1B16'\n            ],\n            data: [40, 20, 80, 10]\n          }\n        ]\n      }\n    }\n\n    const exportChart = () =\u003e {\n      let a = document.createElement('a')\n      a.href = chartRef.value.chartJSState.chart.toBase64Image()\n      a.download = 'image-export.png'\n      a.click()\n      a = null\n    }\n\n    return {\n      chartRef,\n      doughnutChart,\n      exportChart\n    }\n  },\n}\n\u003c/script\u003e\n```\n\n### Adding a plugin\n\nChartJS has two different types of plugins: Global \u0026 Inline.\n\nInline plugins can be passed directly to the chart via the plugins array prop and will be available for that chart only.\n\nGlobal plugins require registration with ChartJS and will be available for all charts. Some plugins must be registered.\n\nHere is an example of adding a global plugin, in this case [`chartjs-plugin-zoom`](https://github.com/chartjs/chartjs-plugin-zoom).\n\nGlobal plugins can be registered one of two ways:\n\n#### Via Component Install\n\n```javascript\nimport Vue3ChartJs from '@j-t-mcc/vue3-chartjs'\nimport zoomPlugin from 'chartjs-plugin-zoom'\n\nconst Vue = createApp(App)\n\nVue.use(Vue3ChartJs, {\n  plugins: [\n    zoomPlugin\n  ]\n})\n\nVue.mount('#app')\n````\n\n#### Via Helper Function\n\n```javascript\nimport Vue3ChartJs from '../lib/main'\nimport zoomPlugin from 'chartjs-plugin-zoom'\n\nVue3ChartJs.registerGlobalPlugins([zoomPlugin])\n```\n\nExample usage with locally imported chart component:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv style=\"height:600px;width:600px;\"\u003e\n    \u003cvue3-chart-js\n        :id=\"lineChart.id\"\n        :type=\"lineChart.type\"\n        :data=\"lineChart.data\"\n        :options=\"lineChart.options\"\n    \u003e\u003c/vue3-chart-js\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Vue3ChartJs from '@j-t-mcc/vue3-chartjs'\nimport zoomPlugin from 'chartjs-plugin-zoom'\n\nVue3ChartJs.registerGlobalPlugins([zoomPlugin])\n\nexport default {\n  name: 'App',\n  components: {\n    Vue3ChartJs,\n  },\n  setup () {\n    const lineChart = {\n      id: 'line',\n      type: 'line',\n      data: {\n        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],\n        datasets: [{\n          label: '# of Votes',\n          data: [50, 19, 3, 5, 2, 3],\n          backgroundColor: [\n            'rgba(255, 99, 132, 0.2)',\n            'rgba(54, 162, 235, 0.2)',\n            'rgba(255, 206, 86, 0.2)',\n            'rgba(75, 192, 192, 0.2)',\n            'rgba(153, 102, 255, 0.2)',\n            'rgba(255, 159, 64, 0.2)'\n          ],\n          borderColor: [\n            'rgba(255, 99, 132, 1)',\n            'rgba(54, 162, 235, 1)',\n            'rgba(255, 206, 86, 1)',\n            'rgba(75, 192, 192, 1)',\n            'rgba(153, 102, 255, 1)',\n            'rgba(255, 159, 64, 1)'\n          ],\n          borderWidth: 1\n        }]\n      },\n      options: {\n        plugins: {\n          zoom: {\n            zoom: {\n              wheel: {\n                enabled: true,\n              },\n              pinch: {\n                enabled: true,\n              },\n              mode: \"y\",\n            },\n          },\n        },\n      },\n    }\n\n    return {\n      lineChart\n    }\n  },\n}\n\u003c/script\u003e\n```\n\n## Demo\n\nFor a demo, Clone this repository and run:\n\n```shell script\nyarn install\n\nyarn dev\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj-t-mcc%2Fvue3-chartjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fj-t-mcc%2Fvue3-chartjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj-t-mcc%2Fvue3-chartjs/lists"}