{"id":18678145,"url":"https://github.com/zingchart/zingchart-vue","last_synced_at":"2025-10-11T20:08:32.879Z","repository":{"id":85225198,"uuid":"209760456","full_name":"zingchart/zingchart-vue","owner":"zingchart","description":"A Vue component to create charts with ZingChart","archived":false,"fork":false,"pushed_at":"2024-06-11T20:19:46.000Z","size":3998,"stargazers_count":25,"open_issues_count":0,"forks_count":5,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-08-19T06:54:28.164Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.zingchart.com/docs/integrations/vue","language":"Vue","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/zingchart.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":"2019-09-20T10:00:09.000Z","updated_at":"2025-01-14T06:37:11.000Z","dependencies_parsed_at":"2024-01-02T23:29:42.023Z","dependency_job_id":"a5fc6387-26e2-4450-bcc6-d589d5720bfd","html_url":"https://github.com/zingchart/zingchart-vue","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/zingchart/zingchart-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zingchart","download_url":"https://codeload.github.com/zingchart/zingchart-vue/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-vue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279008580,"owners_count":26084480,"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","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-07T09:36:10.828Z","updated_at":"2025-10-11T20:08:32.850Z","avatar_url":"https://github.com/zingchart.png","language":"Vue","readme":"![](https://img.shields.io/npm/v/zingchart-vue)\n![](https://img.shields.io/npm/l/zingchart-vue)\n![](https://img.shields.io/npm/dw/zingchart-vue)\n\n\n![](https://github.com/zingchart/zingchart-vue/workflows/Build/badge.svg?branch=master)\n![](https://github.com/zingchart/zingchart-vue/workflows/Test/badge.svg?branch=master)\n\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\n![](https://d2ddoduugvun08.cloudfront.net/items/2u3R031j3O3M2A3c3V0w/Screen%20Recording%202020-06-04%20at%2002.24%20PM.gif?X-CloudApp-Visitor-Id=3179966)\n\n\n## Quickstart guide\n\nQuickly add charts to your Vue application with our ZingChart component.\n\nThis guide assumes some basic working knowledge of Vue.\n\n## 1. Install\n\n\nInstall the `zingchart` package via npm:\n```\nnpm install zingchart\n```\n\nInstall the `zingchart-vue` package via npm:\n```\nnpm install zingchart-vue\n```\n\n## 2. Include the `zingchart` package in your project\n\nThe `zingchart` package is a **DIRECT** dependency of `zingchart-vue` but you can also update this package outside of this component. Meaning the wrapper is no longer tied to a ZingChart library version, but just the component itself.\n\nYou can import the library like so:\n\n```javascript\n// import the es6 version\nimport 'zingchart/es6';\n```\n\n## 3. Include the component in your project \n\nYou can either include the `zingchart-vue` component to your project globally or locally per component. **Import the component AFTER ZingChart since it is a DIRECT dependency.**\n\n```js\n// import the es6 version\nimport 'zingchart/es6';\n// import the component AFTER ZingChart since it is a DIRECT dependency\nimport ZingChartVue from 'zingchart-vue';\n```\n\n### Globally\n\nIn your main app file, add the following lines of code:\n\n```js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport ZingChartVue from './ZingChart.vue';\n\nconst app = createApp(App);\napp.component('ZingChartVue', ZingChartVue);\napp.mount('#app');\n```\n\nThis will register the zingchart component globally throughout your application. While the easiest installation option, this will load ZingChart immediately on your user's first load of the application - regardless if a chart is on the first page or not. We recommend this approach if ZingChart is used heavily across multiple pages.\n\n\n\n### Globally and locally\n\nYou can also register the `ZingChartVue` component globally and then import just `zingchart/es6` locally per each component that uses charts. \n\n```js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport ZingChartVue from './ZingChart.vue';\n\nconst app = createApp(App);\n// install globally to app\napp.component('ZingChartVue', ZingChartVue);\napp.mount('#app');\n```\n\nThen inside the component you import the `zingchart/zingchart-es6` library.\n\n```js\nimport 'zingchart/es6';\n```\n\n### Locally per component\n\nIn each component where ZingChart is being used, include the following in your component's configuration:\n\n```js\nimport 'zingchart/es6';\nimport ZingChartVue from 'zingchart-vue';\n```\n\n**Note:** We recommend this approach if ZingChart is only included in a few, un-related pages across your application. \n\n## ZingChart Modules\n\nZingChart comes bundled with your common chart types such as line, column, pie, and scatter. For additional chart types, you will need to import the additional module file.\n\nFor example, adding a depth chart to your vue component will require an additional import. Note, you must import from the `modules-es6` directory in the zingchart package.\n\n```js\n// explicitly import the module\nimport 'zingchart/modules-es6/zingchart-depth.min.js';\n\n```\n\nHere is a full .vue example for loading a map:\n\n```\n\u003cscript setup\u003e\n    // import library\n    import 'zingchart/es6';\n    import ZingChartVue from 'zingchart-vue';\n\n    // import chart modules used on that page\n    import 'zingchart/modules-es6/zingchart-maps.min.js';\n    import 'zingchart/modules-es6/zingchart-maps-usa.min.js';\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cZingChartVue\n        ref=\"myChart\"\n        :data=\"{\n            shapes: [\n            {\n                type: 'zingchart.maps',\n                options: {\n                    name: 'usa',\n                    ignore: ['AK','HI']\n                }\n            }\n        ]\n    }\" /\u003e\n\u003c/template\u003e\n```\n\n\n### `zingchart` Global Objects\n\nIf you need access to the `zingchart` objects for licensing or development flags.\n\n```javascript\nimport ZingChartVue from 'zingchart-vue';\n\n// zingchart object for performance flags\nzingchart.DEV.KEEPSOURCE = 0; // prevents lib from storing the original data package\nzingchart.DEV.COPYDATA = 0; // prevents lib from creating a copy of the data package \n\n// ZC object for license key\nzingchart.LICENSE = ['abcdefghijklmnopqrstuvwxy'];\n```\n\n\n## Usage\n\nThe `zingchart-vue` component can be included into template as an element. Below is a simple example of a line chart:\n\n```html\n\u003cZingChartVue :data=\"chartData\" /\u003e\n```\n\n```js\n\u003cscript setup\u003e\n    import ZingChartVue from 'zingchart-vue';\n    \n    const chartData = {\n        type: \"line\",\n            series: [\n            {\n                values: [6,4,3,4,6,6,4]\n            }\n        ]\n    };\n\u003c/script\u003e\n```\n\n## Parameters\n\nThe properties, or parameters, you can pass to the `\u003cZingChartVue\u003e` tag itself.\n\n### `data` [object]\n\nThe configuration object to pass to the chart. This can be a `graphset` object (multi-chart shared configuration) or a standard single chart configuration.\n\n```html\n\u003cZingChartVue :data=\"myData\" :series=\"mySeries\" /\u003e\n```\n\n```js\n\u003cscript setup\u003e\n    import ZingChartVue from '../ZingChart.vue';\n\n    const myData = {\n        type: 'line',\n        title: {\n            text: 'Hello World',\n        },\n    };\n    \n    const mySeries = [\n        { values: [1,2,4,5,6] }\n    ];\n}\n\u003c/script\u003e\n```\n\n### `series` [array] (optional)\n\nAccepts an array of series objects, and overrides a series if it was supplied into the config object. Varries by chart type used - Refer to the ZingChart documentation for more details.\n\n### `id` [string] (optional)\n\nThe id for the DOM element for ZingChart to attach to. If no id is specified, the id will be autogenerated in the form of zingchart-auto-#.\n\n### `output` [string] (optional)\n\nThe render type of the chart. **The default is `svg`** but you can also pass the string `canvas` to render the charts in canvas. \n\n### `width` [string or number] (optional)\n\nThe width of the chart. Defaults to 100%.\n\n### `height` [string or number] (optional)\n\nThe height of the chart. Defaults to 480px.\n\n### `theme` [object] (optional)\n\nThe theme or 'defaults' object defined by ZingChart. More information available here: https://www.zingchart.com/docs/api/themes\n\n### `modules` [string or array] (optional)\nAn option to add the name of modules being loaded, into ZingChart's render object. Necessary for certain modules including the 'scalableYAxis'.\n\n### `forceRender` [string] (optional)\nThe addition of this property will force ZingChart to re-render on all configuration changes. This isn't optimally performant, but some ZingChart features will require a full re-render of the chart, rather than an internal data update change. Only use this option when necessary.\n\n\n## Events\n\nAll zingchart events are readily available on the component to listen to. For example, to listen for the 'complete' event when the chart is finished rendering:\n\n```html\n    \u003cZingChartVue :data=\"myData\" @complete=\"chartCompleted\" /\u003e\n```\n\n```js\nfunction chartCompleted(result) {\n    console.log(`The chart ${result.id} finished rendering`);\n}\n```\n\nFor a list of all the events that you can listen to, refer to the complete documentation on https://www.zingchart.com/docs/api/events.\n\nNote that the event names are translated to camel-case:\n- complete =\u003e @complete\n- node_mouseover =\u003e @nodeMouseover\n- legend_marker_click =\u003e @legendMarkerClick\n\n\n### Methods\n\nAll zingchart methods are readily available on the component's instance to call. For example, to add a new plot node to the chart:\n\n```html\n    \u003cZingChartVue ref=\"chart\" :data=\"myData\" /\u003e\n```\n\n```js\nconst chart = ref();\n\nfunction myCustomAddNode() {\n    chart.value.addnode({\n        value: 55,\n    });\n}\n\nfunction myCustomMapZoom() {\n    // Example of usage when method name contains member (.) operator\n    chart.value['zingchart.maps.viewAll']({\n        value: 55,\n    });\n}\n```\n\nFor a list of all the methods that you can call and the parameters each method can take, refer to the complete documentation on https://www.zingchart.com/docs/api/methods\n\n\n## Working Example\n\nThis repository contains a sample Vue application to give you an easy way to see the component in action\n\n```\nnpm run dev \n```\n","funding_links":[],"categories":["Components \u0026 Libraries","UI Components [🔝](#readme)"],"sub_categories":["UI Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzingchart%2Fzingchart-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzingchart%2Fzingchart-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzingchart%2Fzingchart-vue/lists"}