QuickStart

Make charts in minutes.  

Creating Charts

A quick overview of the most common tasks related to creating charts.

🔗Install

🔗Using CDN

Visit the CDN index 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 package page for more information.

npm install --save jscharting

🔗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 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 fetch(), CSV, and JSON Tutorial.

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

Overview Tutorial Chart Types Overview

🔗Chart 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" });

Code Expansion Tutorial More details on 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

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 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"
    }
  ]
});

Labels Tutorial Using Labels

🔗Disable Export Toolbar

chart.options({ toolbar_items_export_visible: false });

UI Controls Tutorial A simple to use API to define interactive input elements rendered on a chart.

🔗Disable box visuals

chart.options({ defaultBox_boxVisible: false });