Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zingchart/ZingChart
A declarative, efficient, and simple JavaScript library for building responsive charts
https://github.com/zingchart/ZingChart
charts javascript no-dependencies responsive
Last synced: 2 months ago
JSON representation
A declarative, efficient, and simple JavaScript library for building responsive charts
- Host: GitHub
- URL: https://github.com/zingchart/ZingChart
- Owner: zingchart
- Created: 2014-09-25T18:41:43.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2024-09-23T23:02:18.000Z (3 months ago)
- Last Synced: 2024-10-13T13:09:21.266Z (3 months ago)
- Topics: charts, javascript, no-dependencies, responsive
- Language: JavaScript
- Homepage: https://www.zingchart.com
- Size: 132 MB
- Stars: 276
- Watchers: 32
- Forks: 46
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [ZingChart](https://www.zingchart.com/)
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](https://www.nuget.org/packages/ZingChart/).
```
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:
* [Angular](https://github.com/zingchart/zingchart-angular)
* [React](https://github.com/zingchart/zingchart-react)
* [Vue](https://github.com/zingchart/zingchart-vue)
* [WebComponent](https://github.com/zingchart/zingchart-web-component)
* [JQuery](https://github.com/zingchart/ZingChart-jQuery)
* [PHP](https://github.com/zingchart/ZingChart-PHP)
* [AngularJS](https://github.com/zingchart/ZingChart-AngularJS)
* [Ember](https://github.com/zingchart/ember-zingchart)
* [Backbone](https://github.com/zingchart/backbone-zingchart)
## Quick Start es5
Include a reference to the zingchart library
```html
let chartData = {
type: 'pareto',
series: [
{
values: [
4642,
4345,
2350,
1251
]
}
]
};
// Render Method[3]
zingchart.render({
id: 'myChart',
data: chartData,
height: 400,
width: '100%'
});
```
## 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
```html
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%'
});
```
## Resources:
* [Getting Started Guide](https://www.zingchart.com/docs/getting-started/your-first-javascript-chart)
* [Docs](http://www.zingchart.com/docs)
* [JSON Docs](https://www.zingchart.com/docs/api/json-configuration)
* [API Events](https://www.zingchart.com/docs/api/events)
* [API Methods](https://www.zingchart.com/docs/api/methods)
* [Gallery](https://www.zingchart.com/gallery/)
* [Download](https://www.zingchart.com/download/)
* [Support](https://www.zingchart.com/support)
* [Stack Overflow](https://stackoverflow.com/search?q=zingchart)
* [Studio](https://app.zingsoft.com)
## 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