JSCharting: Any Chart. Anywhere.

JSCharting is a JavaScript chart library for visualizing your data, providing resolution independent results across all devices and platorms. Every JSCharting license includes the full suite of 150+ advanced chart types plus interactive stock charts, seamless grid and calendar support, JavaScript maps, Gantt charts, JavaScript Org Charts and micro charts at no additional charge.

Install

Using CDN

<script src="https://code.jscharting.com/latest/jscharting.js"></script>

Download

The latest release can be downloaded here.

Using npm

See npm documentation for more information.

npm install --save jscharting

npm usage

The JSC package folder jscharting/dist/ includes all the necessary charting JavaScript files and resources such as icons, polyfills, and mapping data files. The chart loads these resources dynamically as needed. The content of this folder should be accessible through http, so when building, copy this folder to a destination in the output website.

If the chart detects a script tag pointing to the main jscharting.js file, it will assume the rest of the resources are located in the same place and will load them from there.

If the JSC namespace is imported from the jscharting.js file as a module, the chart will not know where resources are located and will load them from the CDN. If debug:true chart option is set, a warning message will note that the chart is using the CDN. In order to use local resources, point the chart baseUrl option to the location of the local copy of the jscharting/dist/ folder.

To avoid setting the baseUrl property on every chart instance, it can be set as a global default like so:

JSC.defaults({ baseUrl: './js/jsc/' });

A wrapper module can be used to apply the baseUrl and any other default options that should be used globally such as debug, or styling options. All subsequent charts can import this wrapper instead of the chart itself to ensure the default options are always applied.

import * as JSC from "jscharting";

JSC.defaults({ baseUrl: './js/jsc/' });

export default JSC;

First Chart

Get some data

JSC.fetch() is an alias for vanilla JS fetch() function but includes a polyfill for IE11. This function makes it easy to get data for the chart.

JSC.fetch('./data.csv')
    .then(response => response.text())
    .then(text => {
        //Use csv text 
    });

If data is transferred as csv, tsv or any delimiter separated values use JSC.csv2Json().

let data = JSC.csv2Json(
'date,actual,goal\n1/1/2018,5409,7000\n1/2/2018,4893,7000'
)
// ->
//[{date: 1514786400000, actual: 5409, goal: 7000},
//{date: 1514872800000, actual: 4893, goal: 7000}]

Map data to chart points

let points = data.map(d => { x: d.date, y: d.actual });
//-> [{ x: 1514786400000, y: 5409 }, { x: 1514872800000, y: 4893 }]

Draw a chart

A target div element is required in the page for the chart to render in.

<div id="chartDiv"></div>

Instantiate the chart

const chart = new JSC.Chart('chartDiv', { 
    //Pass points to the series
    series:[{ points:points }], 
    // Set the x axis scale to time.
    xAxis_scale_type:'time' 
});

Crash Course

(5 min read to hit the ground running)

The JSCharting API is designed with ease of use in mind. The chart attempts to select default options that are obvious to reduce the need to customize.

Chart Types

Chart types can be set easily through options such as:

const chart = new JSC.Chart('divId', { type:'line step' });

Examples of chart type settings:

• 'horizontal column aqua' - Horizontal columns with aqua shading
• 'gauge linear horizontal' - Horizontal linear gauges.
• 'radar polar column' - Polar radar chart with columns.

More information

Options

Chart options are set in the chart constructor

const chart = new JSC.Chart('divId', { /*options*/ });

Or at any time after the chart is rendered with

chart.options({ /*options*/ });

JSCharting offers a declarative API with options such as

chart.options({ title: { label: { text: 'title text' }}});

However, property paths can be combined into single property names.

chart.options({ title_label_text: 'title text' });

Property Expansion

Hide Legend

chart.options({ legend_visible: false });

Legend Columns

//Less Detail
chart.options({ legend_template: '%icon %name' });
//More Detail
chart.options({ legend_template: '%average %sum %icon %name' });

Legend Entries for Points

chart.options({ defaultSeries_palette: 'default' });

Legend Tutorial

Labels

chart.options({
    //Title text
    title_label_text:'Title text',
    //Axis label text
    xAxis_label_text:'Time',
    yAxis_label_text:'Steps',
    //Point labels
    defaultPoint_label_text:'%yValue',
    //Annotations
    annotations:[{
        position:'top',
        label_text:'Annotation text'
    }]
});

Using Labels

Disable Export Toolbar

chart.options({ toolbar_items_export_visible: false });

Toolbar & UiItems

Disable box visuals

chart.options({ defaultBox_boxVisible: false });