terebyte / jelly-chart

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

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

• API Documents
• Demo

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

LICENSE

GPL-3.0+