{"id":18678149,"url":"https://github.com/zingchart/zingchart-web-component","last_synced_at":"2025-11-07T09:30:35.475Z","repository":{"id":85225207,"uuid":"210088287","full_name":"zingchart/zingchart-web-component","owner":"zingchart","description":"A web component wrapper for ZingChart","archived":false,"fork":false,"pushed_at":"2021-05-06T17:20:49.000Z","size":8505,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-12-27T21:14:33.203Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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-22T04:05:17.000Z","updated_at":"2024-08-20T03:46:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"a44804e9-c806-4539-8f56-32113be33c15","html_url":"https://github.com/zingchart/zingchart-web-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-web-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-web-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-web-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-web-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zingchart","download_url":"https://codeload.github.com/zingchart/zingchart-web-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239525507,"owners_count":19653341,"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":[],"created_at":"2024-11-07T09:36:11.267Z","updated_at":"2025-11-07T09:30:35.427Z","avatar_url":"https://github.com/zingchart.png","language":"JavaScript","readme":"# ZingChart Web Component\nA web component wrapper around the ZingChart library.\n\n## Install\n\nInstall the zingchart package via npm\n\n`$ npm install zingchart`\n\nInstall the zingchart-web-component package via npm\n\n`$ npm install zingchart-web-component`\n\n\n## Include in your project\n\nThis web component exposes out the main `\u003czing-chart\u003e` web component, as well as chart-specific components such as `\u003czc-line\u003e` for readability and convenience.\n\nDepending on how you include this package, your inclusion will be different.\n\n### Import Modules\n\nImport the generic zingchart component\n```js\nimport 'zingchart/es6.js';\nimport ZingChart from 'zingchart-web-component';\ncustomElements.define('zing-chart', ZingChart);\n```\n\nOR\n\nManually import each chart and register it as a web component.\n\n```js\nimport 'zingchart/es6.js';\nimport {Line} from 'zingchart-web-component/charts/ZCLine.js';\ncustomElements.define('zc-line', Line);\n```\n\n## Usage\n\nThe ZingChart web component is a fully functional web component and exposes all methods and events.\n\n### A simple hello world\nBelow is the most simple and straightforward way to get a chart rendered on your page.\n\n```html\n\u003czing-chart data='{\"type\": \"line\", \"series\": {[\"values\": 1,2,3,4,5,6,4]}}'\u003e\u003c/zing-chart\u003e\n```\nThe data attribute takes the exact same JSON that the ZingChart library uses.\n\nWe can also simplifiy the example by using our line chart component:\n\n```html\n\u003czc-line data='\"series\": [{\"values\": [1,2,3,4,5,6,4]}]'\u003e\u003c/zc-line\u003e\n```\n\nNote the absence of a \"id\" property. We autogenerate a id property so you don't have to (you can still provide one).\n\n### The web-component way\n\nWhile everything can be configured via the data property, you can also fully configure ZingChart via child components.\n\nEach configuration property that ZingChart accepts can also be used as a child-component prefixed by 'zc-'.\n\nFor instance, if we want to set our data for our chart with a component, we would use the zc-series-# components:\n\n```html\n  \u003czc-line\u003e\n    \u003czc-series\u003e\n      \u003czc-series-0 values=\"[3,4,3,2,4,3,3]\"\u003e\u003c/zc-series-0\u003e\n    \u003c/zc-series\u003e\n  \u003c/zc-line\u003e\n```\n\nSimilarly, if we wanted to add a draggable legend, we would simply add the following:\n\n```html\n  \u003czc-line\u003e\n    \u003czc-legend draggable\u003e\u003c/zc-legend\u003e\n    \u003czc-series\u003e\n      \u003czc-series-0 values=\"[3,4,3,2,4,3,3]\"\u003e\u003c/zc-series-0\u003e\n    \u003c/zc-series\u003e\n  \u003c/zc-line\u003e\n```\n\nThe structure of the web-component mirrors the JSON configuration that ZingChart provides, and every property is available at each level.\n\nFor objects that accept arrays, simply use a parent component just as you would in the JSON syntax. Below is an example of adding custom labels:\n\n```html\n\u003czc-line\u003e\n  \u003czc-labels\u003e\n    \u003czc-label x=\"15%\" y=\"5%\" font-size=\"22px\" border-width=\"1px\" font-color=\"black\" font-family=\"Times\"\u003eFirst Label\u003c/zc-label\u003e\n    \u003czc-label x=\"15%\" y=\"10%\" font-size=\"22px\" border-width=\"1px\" font-color=\"red\"\u003eSecond Label\u003c/zc-label\u003e\n  \u003c/zc-labels\u003e\n\u003c/zc-line\u003e\n```\n\n### Reactivity\n\nCurrently the `height`, `width`, `data`, `series`, and `values` are watched and will re-render the chart if changed. Future support for all attributes is planned.\n\n### Methods\n\nAll methods are available via the instance of the component. The methods are simplified and do not require an id like in the JavaScript version.\n\n```js\nzingchart.exec('myChart', 'setseriesvalues', {\n  values: [\n    [19, 28, 13, 42, ...],\n    [37, 11, 27, 25, ...]\n  ]\n);\n```\n\n```js\nconst chart = document.querySelector('zing-chart');\nchart.setseriesvalues({\n  values: [\n    [19, 28, 13, 42, ...],\n    [37, 11, 27, 25, ...]\n  ]\n});\n```\n\n### Events\nEvents can be attached to the root component, and passed a global function to send the event results to. All ZingChart events are available.\n\n```js\nwindow.chartRendered = function() {\n  console.log('The chart is rendered!');\n}\n```\n\n```html\n\u003czing-chart complete=\"chartRendered\"\u003e\u003c/zing-chart\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzingchart%2Fzingchart-web-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzingchart%2Fzingchart-web-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzingchart%2Fzingchart-web-component/lists"}