@zingsoft/zingchart-svelte




Quickstart Guide

Quickly add charts to your Svelte application with our ZingChart component

This guide assumes some basic working knowledge of Svelte.

1. Install

Install the zingchart-svelte package as a dev dependency via npm:

npm install -D zingchart-svelte

or via yarn:

yarn add -D zingchart-svelte

2. Include the component in your project

You should include the zingchart-svelte component to your project via modules:

``js
import ZingChart from 'zingchart-svelte';
`

$3

The zingchart module is a direct dependency of zingchart-svelte so, normally,
you don't need to explicitly import it. If you do want to import it, import
the ES6 version via:

`js
import 'zingchart/es6';
`

This will create the global zingchart object. Again, this is already handled
by importing the ZingChart Svelte component, but you may want to access the
zingchart 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";
`

Usage

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

$3

All zingchart methods can be invoked on a ZingChart component via the exec()
method. Just bind a Svelte reference to the component and use it to call exec(),
using the same method name and argument parameters as specified in the ZingChart
documentation (the chart id will be inserted for you). For example, to add
new plot data to an existing chart:

`svelte