Jelly-Chart

Jelly-Chart

Jelly-Chart is a chart library based on D3v4 and SVG.

chart-types

Chart Types

Documents

Download && Installation

Download

Use CDN

1
2
3
4

<!-- 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

1

$ npm install --save jelly-chart

Dependency

D3 (required)
4+

HTML

1
2
3
4
5

<!-- 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.

1

import jelly from "jelly-chart";

Basic Usage

1) Insert a chart holder element

1

<div id="chart"></div>

2) Call a chart generator

1
2
3

var bar = jelly.bar();
//or
var bar = jelly.type('bar');

3) set a container, data and options, then render

1
2
3
4
5
6
7
8
9
10
11

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

1
2
3
4
5
6
7
8
9
10
11

# Install dependencies
$ npm install

# Run dev-server for development
$ npm start

# Test
$ npm test

# Build
$ npm run build

LICENSE

GPL-3.0+