{"id":18678128,"url":"https://github.com/zingchart/zingchart-svelte","last_synced_at":"2025-11-07T09:30:33.802Z","repository":{"id":57170845,"uuid":"437147513","full_name":"zingchart/zingchart-svelte","owner":"zingchart","description":"Component for integrating ZingChart into a Svelte application","archived":false,"fork":false,"pushed_at":"2023-12-21T22:03:09.000Z","size":1978,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-01-27T22:16:55.253Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Svelte","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}},"created_at":"2021-12-11T00:11:14.000Z","updated_at":"2021-12-21T18:44:20.000Z","dependencies_parsed_at":"2023-12-22T00:49:54.177Z","dependency_job_id":"b23d11f9-f52a-4f60-ac15-cff4810ff91d","html_url":"https://github.com/zingchart/zingchart-svelte","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zingchart","download_url":"https://codeload.github.com/zingchart/zingchart-svelte/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239525498,"owners_count":19653337,"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:06.996Z","updated_at":"2025-11-07T09:30:33.750Z","avatar_url":"https://github.com/zingchart.png","language":"Svelte","readme":"![](https://img.shields.io/npm/v/zingchart-svelte)\n![](https://github.com/zingchart/zingchart-svelte/workflows/Build/badge.svg?branch=master)\n![](https://github.com/zingchart/zingchart-svelte/workflows/Test/badge.svg?branch=master)\n![](https://img.shields.io/npm/dw/zingchart-svelte)\n\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\n[![](https://github.com/zingchart/zingchart-svelte/blob/main/zingchart-demo.gif?raw=true)](https://codesandbox.io/s/zingchart-svelte-wrapper-example-dxfc9)\n\n## Quickstart Guide\n\nQuickly add charts to your Svelte application with our ZingChart component\n\nThis guide assumes some basic working knowledge of Svelte.\n\n\n## 1. Install\n\nInstall the `@zingsoft/zingchart-svelte` package as a dev dependency via `npm`:\n\n`npm install -D @zingsoft/zingchart-svelte`\n\nor via `yarn`:\n\n`yarn add -D @zingsoft/zingchart-svelte`\n\n## 2. Include the component in your project \n\nYou should include the `zingchart-svelte` component to your project via modules:\n\n```js\nimport ZingChart from '@zingsoft/zingchart-svelte';\n```\n\n### `zingchart` Global Object\n\nThe `zingchart` module is a direct dependency of `zingchart-svelte` so, normally,\nyou don't need to explicitly import it. If you do want to import it, import\nthe `ES6` version via:\n\n```js\nimport 'zingchart/es6';\n```\n\nThis will create the global `zingchart` object. Again, this is already handled \nby importing the `ZingChart` Svelte component, but you may want to access the\n`zingchart` global outside of a component in order to configure it, set the \nlicense, etc.:\n\n```js\n// zingchart object used to set 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 used to set license key\nzingchart.LICENSE = ['abcdefghijklmnopqrstuvwxy'];\n```\n### Optional Modules\n\nYou will need to import optional ZingChart modules if you intend to\nuse them. For example, if you want to draw a USA map, you would add the maps\nand USA maps modules via:\n\n```js\nimport \"zingchart/modules-es6/zingchart-maps.min.js\";\nimport \"zingchart/modules-es6/zingchart-maps-usa.min.js\";\n```\n\n## Usage\n\nHere's an example of using the `ZingChart` component in one of your Svelte components:\n\n```svelte\n\u003cscript\u003e\n  import ZingChart from '@zingsoft/zingchart-svelte';\n\n  const config = {\n    type: 'bar',\n    series: [\n      { values: [4,5,3,4,5,3,5,4,11] }\n    ]\n  }\n\u003cscript\u003e\n\n\u003cZingChart data={config} /\u003e\n```\n\n## Properties\n\nThe properties, or parameters, you can pass to the `\u003cZingChart\u003e` component:\n\n### data [object]\n\n```js\n\nconst myData = {\n    type: 'line',\n    series: [\n      { values: [1,2,4,5,6] }\n    ]\n};\n\n\u003cZingChart data={myData} /\u003e\n```\n\n### `id` [string] (optional)\nThe id for the DOM element for ZingChart to attach to. If no id is specified, the id\n will be autogenerated in the form of `zingchart-svelte-#`.\n\n### `series` [array] (optional)\nAccepts an array of series objects, and overrides a series if it was supplied into the\nconfig object. Varies according to the chart type used, refer to the ZingChart documentation for more details.\n\n```js\nconst myData = {\n    type: 'line',\n};\n\nconst mySeries = [\n  { values: [1,2,4,5,6] }\n];\n\n\u003cZingChart data={myData} series={mySeries} /\u003e\n\n```\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] (optional)\nThe modules object to load additional modules. More information available here: https://www.zingchart.com/docs/api/zingchart-modules#modules-list\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\nNote: All other properties that are added to your `ZingChart` component will be added \nto the `zingchart` render object. This allows for settings such as 'customprogresslogo',\nor any other setting listed in the ZingChart documentation,\nto be set. Any unrecognized properties will be ignored.\n\n## Events\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```svelte\n\u003cscript\u003e\n  import ZingChart from '@zingsoft/zingchart-svelte';\n\n  const config = {\n    type: 'line',\n    series: [\n      { values: [4,5,3,4,5,3,5,4,11] }\n    ]\n  }\n\n  function chartDone(event) {\n    console.log('Event \"Complete\" - The chart is rendered\\n');\n  }\n\u003c/script\u003e\n\n\u003cZingChart data={config} complete={chartDone} /\u003e\n```\n\nFor a list of all the events that you can listen to, refer to the complete \ndocumentation at https://www.zingchart.com/docs/api/events\n\n### Methods\n\nAll `zingchart` methods can be invoked on a `ZingChart` component via the `exec()` \nmethod. Just bind a Svelte reference to the component and use it to call `exec()`,\nusing the same method name and argument parameters as specified in the ZingChart\ndocumentation (the chart `id` will be inserted for you). For example, to add  \nnew plot data to an existing chart:\n\n```svelte\n\u003cscript\u003e\n  import ZingChart from '@zingsoft/zingchart-svelte';\n\n  let chart     // chart reference\n\n  const config = {\n    type: 'bar',\n    series: [\n      { values: [4,5,3,4,5,3,5,4,11] }\n    ]\n  }\n\n  function addData() {\n    chart.exec('addplot', {\n      data: {\n        values: [5,3,3,5,6,4,3,4,6]\n      }\n    });\n  }\n\u003cscript\u003e\n\n\u003cdiv\u003e\n  \u003cbutton on:click={addData}\u003eAdd data\u003c/button\u003e\n  \u003cZingChart bind:this={chart} data={config} /\u003e\n\u003c/div\u003e\n```\n\nFor a list of all the methods that you can call and the parameters each method can take, \nrefer to the complete documentation at https://www.zingchart.com/docs/api/methods\n\n## Working Example\n\nSee https://github.com/zingchart-demos/zingchart-svelte-demo for a demo that shows this component in action.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzingchart%2Fzingchart-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzingchart%2Fzingchart-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzingchart%2Fzingchart-svelte/lists"}