A Svelte component to incorporate ZingChart into a Svelte application
npm install @zingsoft/zingchart-svelte





Quickly add charts to your Svelte application with our ZingChart component
This guide assumes some basic working knowledge of Svelte.
Install the zingchart-svelte package as a dev dependency via npm:
npm install -D zingchart-svelte
or via yarn:
yarn add -D zingchart-svelte
You should include the zingchart-svelte component to your project via modules:
``js`
import ZingChart from 'zingchart-svelte';
The zingchart module is a direct dependency of zingchart-svelte so, normally,ES6
you don't need to explicitly import it. If you do want to import it, import
the version via:
`js`
import 'zingchart/es6';
This will create the global zingchart object. Again, this is already handled ZingChart
by importing the Svelte component, but you may want to access thezingchart global outside of a component in order to configure it, set the
license, etc.:
`js
// zingchart object used to set performance flags
zingchart.DEV.KEEPSOURCE = 0; // prevents lib from storing the original data package
zingchart.DEV.COPYDATA = 0; // prevents lib from creating a copy of the data package
// ZC object used to set license key
zingchart.LICENSE = ['abcdefghijklmnopqrstuvwxy'];
`$3
You will need to import optional ZingChart modules if you intend to
use them. For example, if you want to draw a USA map, you would add the maps
and USA maps modules via:
`js`
import "zingchart/modules-es6/zingchart-maps.min.js";
import "zingchart/modules-es6/zingchart-maps-usa.min.js";
Here's an example of using the ZingChart component in one of your Svelte components:
`svelte
`
For a list of all the events that you can listen to, refer to the complete
documentation at https://www.zingchart.com/docs/api/events
All zingchart methods can be invoked on a ZingChart component via the exec() exec()
method. Just bind a Svelte reference to the component and use it to call ,id
using the same method name and argument parameters as specified in the ZingChart
documentation (the chart will be inserted for you). For example, to add
new plot data to an existing chart:
`svelte