jscharting

JSCharting: Any Chart. Anywhere.

JSCharting is a JavaScript chart library for visualizing your data across all devices and platforms. Every JSCharting license includes the full suite of 150+ advanced chart types plus Gantt charts, JavaScript Org Charts, interactive stock and finance charts, seamless grid and calendar charts, JavaScript maps, and micro charts all for no additional charge. JSCharting has all the features you need and many you don't yet know you want.

Example Charts: Chart Types | Feature Examples

Install

Using CDN

Visit code.jscharting.com for a list of available releases.

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

Download

The latest release can be downloaded here.

Using npm

See npm documentation to get started with npm.

npm install --save jscharting

Working with a local copy of JSCharting

The npm 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

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

<div id="chartDiv" style="width: 100%; height: 400px;"></div>

The chart will automatically conform to the container size by default.

Instantiate a chart with some static data.

const chart = new JSC.Chart('chartDiv', { 
  series:[{
    points: [{ x: 'A', y: 10 }, { x: 'B', y: 5 }]
  }], 
});

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, it can be converted to JSON format. See the fetch(), CSV, and JSON tutorial for more information.

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 => {  
  return { x: d.date, y: d.actual }; 
});
//-> [{ x: 1514786400000, y: 5409 }, { x: 1514872800000, y: 4893 }]

Render a chart using data

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*/ });

Property Expansion

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 as follows:

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

Property Expansion Details

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

The following code snippet sets a series palette which causes each point in a series to have an entry in the legend box.

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

Chart with a button

Quickly add UI elements to make charts more interactive.

JSC.Chart('chartDiv', { 
    toolbar_items: {
        'Click Me': {
            events_click: function(){ alert('Button clicked');}
        }}
});

Toolbar & UiItems

Changelog

[3.3.0] - 2022-4-1

Added

• Support for linear gradients in <icon> tags.
• Color adjustment options (darken, lighten) with gradient stops colors based on the first color.
• Set area series gradient fill with dynamic color adjustment values to create a gradient look regardless of the series color. i.e. ['currentColor','white', 90]
• Support label.outline.color = color adjust keywords based on label color.
• Support point.fill colorAdjust keywords in gradient config values.
• axis.categories property support to specify categories manually.
• Support for property paths in nest key() and rollup() functions. i.e. nest().key('attributes.role').
• Allow toolbar_items_zoom_position setting without overwriting map zoom buttons.
• Enable axisTick.gridLine_width='column' with scales other than category.
• point.getParents() getChildren() functions.
• chart.connectors() function to highlight hierarchy connector lines.
• series().points(hierarchy paths selectors)
• Expand point.parent property to support an array of parent connectors.
• Add point.connectorLine property to style point connectors individually.
• Support point.connectorLine.radius to control radius of connector rounded corners. Including an array of radii to set the radius of each corner of the connector line.
• Organizational chart type modifier to use right angle or straight connector lines. Right angle by default.
• Organizational chart connector line pixel snapping.
• Add point.annotation.syncWidth & syncHeight options for organizational charts.
• Option to set point.focusGlow = false to disable it.

Changed

• Reduced the default organizational chart dependency line arrow size.
• Organizational chart point annotation labels are centered vertically and horizontally by default.
• chart.type = 'organization' to 'organizational'. 'organization' works for backwards compatibility.
• Zoomed organizational chart attempts to move root nodes closer to center on initial view.

Bug Fixes

• Animation on one chart prevents tooltips from appearing on another chart.
• X Axis crosshair working incorrectly with invisible axis and annotation outside the chartArea.
• Chart in a DIV that does not have a height resizes when DIV width changed.
• IE11 stopped working.
• Point mouseOver, mouseOut events not always invoked reliably.
• Some Gantt dependencies on points from other series not always drawn.
• Organizational chart breaks in some cases after changing organizational chart orientation a few times.
• Organizational node connector lines point in the wrong direction with some tree orientations.
• Organizational chart edge cases rendering issues.
• Point selection issue when switching from a max number of points selected limit to another node.
• label.maxWidth may not work if text is larger in some cases.
• Smart category grouping failed to group all labels in a rare case.
• Annotation movement lag in organizational charts when scroll wheel scrolling.
• Automatic point label color sometimes getting gradient fill when point.fill is a gradient.
• Point data as [x,y,z] array is not working with heatmap chart.
• With a full stacked scale some column point corners are not rounding correctly when series visibility changes.
• Axis range tick shows when tick starts exactly when axis range ends, or vice versa.
• Range axis marker with the same start/end value doesn't render a line.
• Axis marker label with user defined alignment renders in corner of chart if label doesn't fit.
• Axis marker label {autoWrap:false} not working.