Our JavaScript charting library is a commercial product. But the full branded version is free to try, forever.
We publish our live, dev and ALL previous builds on our CDN. This is the quickest way to get started.
Current Version and Modules (https://cdn.zingchart.com/zingchart.min.js | https://cdn.zingchart.com/modules/)
https://cdn.zingchart.com/zingchart.min.js
https://cdn.zingchart.com/modules/
ES6 Version and Modules (https://cdn.zingchart.com/zingchart-es6.min.js | https://cdn.zingchart.com/modules-es6/)
https://cdn.zingchart.com/zingchart-es6.min.js
https://cdn.zingchart.com/modules-es6/
We have a variety of package managers to download our library, as well as integrations
npm install zingchart
If you are looking for the ZingChart package and are a .NET user go to nuget package here.
Install-Package ZingChart -Version 2.5.0
Installing our integration packages will also install the library for you. ZingChart is wrapped in a variety of ways for easy consumption with popular JS libraries and frameworks. Official releases are shown here. If you have a third party integration please contact us for inclusion.
npm install zingchart-angular
npm install zingchart-react
npm install zingchart-vue
npm install zingchart-web-component
npm install zingchart-angularjs
List of integrations:
Include a reference to the zingchart library
<!DOCTYPE html>
<html>
<head>
<!--Script Reference [1] -->
<script src="/zingchart/zingchart.min.js"></script>
</head>
<body>
<!--Chart Component [2] -->
<div id="myChart"></div>
<script>
let chartData = {
type: 'pareto',
series: [
{
values: [
4642,
4345,
2350,
1251
]
}
]
};
// Render Method[3]
zingchart.render({
id: 'myChart',
data: chartData,
height: 400,
width: '100%'
});
</script>
</body>
</html>A general best practice to use ZingChart in any of your frameworks is used in the following:
import {zingchart, ZC} from 'zingchart/zingchart-es6';
And if you have and modules you want to include you do the following
import {pareto} from 'zingchart/modules-es6/zingchart-pareto.min.js';
<!DOCTYPE html>
<html>
<head>
<!-- fallback for no module support -->
<script nomodule src="/zingchart/zingchart.min.js"></script>
</head>
<body>
<!-- Chart Component [2] -->
<div id="myChart"></div>
<script type="module">
import {zingchart, ZC} from './zingchart/zingchart-es6.js';
import './zingchart/modules-es6/zingchart-pareto.min.js';
let chartConfig = {
type: 'pareto',
series: [
{
values: [
4642,
4345,
2350,
1251
]
}
]
};
// Render Method[3]
zingchart.render({
id: 'myChart',
data: chartConfig,
height: 400,
width: '100%'
});
</script>
</body>
</html>- Getting Started Guide
- Docs
- JSON Docs
- API Events
- API Methods
- Gallery
- Download
- Support
- Stack Overflow
- Studio
The package includes the following:
| README.md
| zingchart.min.js
| zingchart-es6.min.js
├── modules
| ├── zingchart-3d.min.js
| ├── ...
├── modules-es6
| ├── zingchart-3d.min.js
| ├── ...
If you need any assistance or would like to report any bugs found in ZingChart, please contact us at [email protected] or through our chat client on our website www.zingchart.com