Jelly-Chart
Jelly-Chart is a chart library based on D3v4 and SVG.
Chart Types
- Bar (API | Demo)
- Line (API | Demo)
- Pie (API | Demo)
- Scatter (API | Demo)
- Parallel Coordinates (API | Demo)
- Treemap (API | Demo)
- XY Heatmap (API | Demo)
- Marker Map (API | Demo)
Documents
Download && Installation
Download
Use CDN
<!-- jsDelivr -->
<script src="//cdn.jsdelivr.net/npm/jelly-chart/dist/jelly.min.js"></script>
<!-- unpkg -->
<script src="//unpkg.com/jelly-chart/dist/jelly.min.js"></script> Install from NPM
$ npm install --save jelly-chart
Dependency
| D3 (required) |
|---|
| 4+ |
HTML
<!-- Load D3 and jelly-chart separately -->
<!-- Load D3 first-->
<script src="//d3js.org/d3.v4.min.js"></script>
<!-- Load jelly-chart after D3 -->
<script src="$PATH/jelly.min.js"></script>ES6 Module
Jelly-Chart is written using ECMAScript 6 modules. After importing it, you can create a custom bundle using your preferred bundler.
import jelly from "jelly-chart";Basic Usage
1) Insert a chart holder element
<div id="chart"></div>2) Call a chart generator
var bar = jelly.bar();
//or
var bar = jelly.type('bar');3) set a container, data and options, then render
bar.container('#chart')
.data([
{x: 'A', y: 10},
{x: 'A', y: 20},
{x: 'B', y: 15},
{x: 'B', y: 10}
])
.dimensions(['x'])
.measures(['y'])
bar.render();To find more detailed usages, check Demo and API Docs.
Development
Use NPM Script to build Jelly-chart
# Install dependencies
$ npm install
# Run dev-server for development
$ npm start
# Test
$ npm test
# Build
$ npm run build
** CONTRIBUTING ** Fork to modify or update the content, then modify and request with Pull Request!
LICENSE
GPL-3.0+