zingchart / Zingchart
Programming Languages
Projects that are alternatives of or similar to Zingchart
ZingChart
Our JavaScript charting library is a commercial product. But the full branded version is free to try, forever.
Install
CDN
We publish our live, dev and ALL previous builds on our CDN. This is the quickest way to get started.
Current Version
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
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/
Package Managers
We have a variety of package managers to download our library, as well as integrations
npm
npm install zingchart
nuget
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
Integrations
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.
Angular
npm install zingchart-angular
React
npm install zingchart-react
Vue
npm install zingchart-vue
Web Component
npm install zingchart-web-component
AngularJS
npm install zingchart-angularjs
List of integrations:
Quick Start es5
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>
Quick Start es6 Imports
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';
Quick Start es6 w/Script Modules
<!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>
Resources:
- Getting Started Guide
- Docs
- JSON Docs
- API Events
- API Methods
- Gallery
- Download
- Support
- Stack Overflow
- Studio
Package Directory
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
| ├── ...
Support
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