Build v2.8.8
A declarative, efficient, and simple JavaScript library for building responsive charts. With integrations in Angular, React, Vue, JQuery, PHP, Ember, & Backbone.
- Getting Started Guide
- Docs
- JSON DOCS
- API Events
- API Methods
- Demos Gallery
- Download
- Support
- Stack Overflow
- Studio
bower install zingchart
npm install zingchart
https://cdn.zingchart.com/zingchart.min.js
cdn on cdnjs
https://cdnjs.com/libraries/zingchart
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/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>
<!-- Import Library [1] -->
<script type="module">
import {zingchart, ZC} from './zingchart/es6.js';
import './zingchart/modules-es6/zingchart-pareto.min.js';
</script>
<!-- fallback for no module support -->
<script nomodule src="/zingchart/zingchart.min.js"></script>
</head>
<body>
<!-- Chart Component [2] -->
<div id="myChart"></div>
<script>
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>This package supports the CommonJS module format to be used with bundlers such as Browserify when being used with NPM.
Usage : var zingchart = require('zingchart');
The package includes the following:
| README.md
├── client
│ ├── zingchart.min.js
│ ├── modules
├── custom
│ ├── build.js
| ...
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.
We're always working on new demos to help users get started using ZingChart with their framework or database. Take a look at our Demo repo to see if we've covered your toolset. Let us know if we haven't or if you need help with an existing implementation.
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent