JavaScript Charts: API Reference

General Configuration

Configuration common to all charts.

chart: {
  data?: object[];
  container: HTMLElement;
  autoSize: boolean; // default: true
  width: number;
  height: number;
  tooltip: ITooltip;
  padding: IPadding;
  background: IBackground;
  title: ITitle;
  subtitle: ISubtitle;
  legend: ILegend;
  navigator: INavigator;
}

tooltip

Global configuration that applies to all tooltips in the chart.

chart: {
  ...
  tooltip: {
    enabled: boolean; // default: true
    tracking: boolean; // default: true
    class: string;
  }
}

padding

Configuration for the padding shown around the chart.

chart: {
  ...
  padding: {
    top: number; // default: 20
    right: number; // default: 20
    bottom: number; // default: 20
    left: number; // default: 20
  }
}

background

Configuration for the background shown behind the chart.

chart: {
  ...
  background: {
    fill: string; // default: '#FFFFFF'
    visible: boolean; // default: true
  }
}

title

Configuration for the title shown at the top of the chart.

chart: {
  ...
  title: {
    enabled: boolean; // default: true
    text: string; // default: 'Title'
    color: string; // default: '#000000'
    fontStyle: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'bold'
    fontSize: number; // default: 18
    fontFamily: string; // default: 'Verdana, sans-serif'
  }
}

subtitle

Configuration for the subtitle shown beneath the chart title. Note: a subtitle will only be shown if a title is also present.

chart: {
  ...
  subtitle: {
    enabled: boolean; // default: true
    text: string; // default: 'Subtitle'
    color: string; // default: '#000000'
    fontStyle: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
    fontSize: number; // default: 14
    fontFamily: string; // default: 'Verdana, sans-serif'
  }
}

legend

Configuration for the chart legend.

chart: {
  ...
  legend: {
    enabled: boolean; // default: true
    position: 'top' | 'right' | 'bottom' | 'left'; // default: 'right'
    spacing: number; // default: 20
    item: IItem;
  }
}

item

Configuration for the legend items that consist of a marker and a label.

chart: {
  ...
  legend: {
    ...
    item: {
      paddingX: number; // default: 16
      paddingY: number; // default: 8
      marker: IMarker;
      label: ILabel;
    }
  }
}

marker

Configuration for the legend markers.

chart: {
  ...
  legend: {
    ...
    item: {
      ...
      marker: {
        padding: number; // default: 8
        shape: string;
        size: number; // default: 15
        strokeWidth: number; // default: 1
      }
    }
  }
}

label

Configuration for the legend labels.

chart: {
  ...
  legend: {
    ...
    item: {
      ...
      label: {
        color: string; // default: 'black'
        fontStyle: 'normal' | 'italic' | 'oblique'; // default: 'normal'
        fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
        fontSize: number; // default: 12
        fontFamily: string; // default: 'Verdana, sans-serif'
        formatter: Function;
      }
    }
  }
}

function (params: IParams): string;

interface IParams {
  id: string;
  itemId: any;
  value: string;
}

navigator

Configuration for the chart navigator. This config is only supported by cartesian charts.

chart: {
  ...
  navigator: {
    enabled: boolean; // default: false
    height: number; // default: 30
    margin: number; // default: 10
    min: number; // default: 0
    max: number; // default: 1
    mask: IMask;
    minHandle: IMinHandle;
    maxHandle: IMaxHandle;
  }
}

mask

Configuration for the navigator's visible range mask.

chart: {
  ...
  navigator: {
    ...
    mask: {
      fill: string; // default: '#999999'
      stroke: string; // default: '#999999'
      strokeWidth: number; // default: 1
      fillOpacity: number; // default: 0.2
    }
  }
}

minHandle

Configuration for the navigator's left handle.

chart: {
  ...
  navigator: {
    ...
    minHandle: {
      fill: string; // default: '#f2f2f2'
      stroke: string; // default: '#999999'
      strokeWidth: number; // default: 1
      width: number; // default: 8
      height: number; // default: 16
      gripLineLength: number; // default: 8
      gripLineGap: number; // default: 2
    }
  }
}

maxHandle

Configuration for the navigator's right handle.

chart: {
  ...
  navigator: {
    ...
    maxHandle: {
      fill: string; // default: '#f2f2f2'
      stroke: string; // default: '#999999'
      strokeWidth: number; // default: 1
      width: number; // default: 8
      height: number; // default: 16
      gripLineLength: number; // default: 8
      gripLineGap: number; // default: 2
    }
  }
}

Axis Configuration

Configuration for axes in cartesian charts.

axis: {
  type: string;
  position: string;
  nice: boolean; // default: true
  min: number;
  max: number;
  title: ITitle;
  line: ILine;
  tick: ITick;
  label: ILabel;
  gridStyle: IGridStyle;
}

title

Configuration for the title shown next to the axis.

axis: {
  ...
  title: {
    enabled: boolean; // default: true
    text: string; // default: 'Axis Title'
    color: string; // default: '#000000'
    fontStyle: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'bold'
    fontSize: number; // default: 14
    fontFamily: string; // default: 'Verdana, sans-serif'
  }
}

line

Configuration for the axis line.

axis: {
  ...
  line: {
    width: number; // default: 1
    color: string; // default: 'rgba(195, 195, 195, 1)'
  }
}

tick

Configuration for the axis ticks.

axis: {
  ...
  tick: {
    width: number; // default: 1
    size: number; // default: 6
    color: string; // default: 'rgba(195, 195, 195, 1)'
    count: number; // default: 10
  }
}

label

Configuration for the axis labels, shown next to the ticks.

axis: {
  ...
  label: {
    fontStyle: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
    fontSize: number; // default: 12
    fontFamily: string; // default: 'Verdana, sans-serif'
    color: string; // default: '#000000'
    padding: number; // default: 5
    rotation: number; // default: 0
    format: string;
    formatter: Function;
  }
}

function (params: IParams): string;

interface IParams {
  value: any;
  index: number;
  fractionDigits: number;
  formatter: (x: any) => string;
}

gridStyle

Configuration of the lines used to form the grid in the chart area.

axis: {
  ...
  gridStyle: {
    stroke: string; // default: 'rgba(195, 195, 195, 1)'
    lineDash: number[]; // default: [4, 2]
  }
}

Bar/Column Series Configuration

Configuration for bar/column series.

bar: {
  xKey?: string;
  xName: string;
  yKeys?: string[];
  yNames: string[];
  data?: object[];
  visible: boolean; // default: true
  showInLegend: boolean; // default: true
  tooltip: ITooltip;
  grouped: boolean; // default: false
  normalizedTo: number;
  fills: string[]; // default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888']
  fillOpacity: number; // default: 1
  strokes: string[]; // default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
  strokeOpacity: number; // default: 1
  strokeWidth: number; // default: 1
  highlightStyle: IHighlightStyle;
  shadow: IShadow;
  lineDash: number[]; // default: []
  lineDashOffset: number; // default: 0
  label: ILabel;
  formatter: Function;
  listeners: IListeners;
}

function (params: IParams): IReturn;

interface IParams {
  datum: any;
  fill: string;
  stroke: string;
  strokeWidth: number;
  highlighted: boolean;
  xKey: string;
  yKey: string;
}

interface IReturn {
  fill: string;
  stroke: string;
  strokeWidth: number;
}

tooltip

Series-specific tooltip configuration.

bar: {
  ...
  tooltip: {
    enabled: boolean; // default: true
    renderer: Function;
  }
}

function (params: IParams): string;

interface IParams {
  datum: any;
  title?: string;
  color?: string;
  xKey: string;
  xValue: any;
  xName?: string;
  yKey: string;
  yValue: any;
  yName?: string;
}

highlightStyle

Configuration for the highlighting used when the bars are hovered over.

bar: {
  ...
  highlightStyle: {
    fill: string; // default: 'yellow'
    stroke: string;
  }
}

shadow

Configuration for the shadow used behind the chart series.

bar: {
  ...
  shadow: {
    enabled: boolean; // default: true
    color: string; // default: 'rgba(0, 0, 0, 0.5)'
    xOffset: number; // default: 0
    yOffset: number; // default: 0
    blur: number; // default: 5
  }
}

label

Configuration for the labels shown on bars.

bar: {
  ...
  label: {
    enabled: boolean; // default: true
    color: string; // default: 'rgba(70, 70, 70, 1)'
    fontStyle: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
    fontSize: number; // default: 12
    fontFamily: string; // default: 'Verdana, sans-serif'
  }
}

listeners

A map of event names to event listeners.

bar: {
  ...
  listeners: {
    nodeClick: Function;
  }
}

function (params: IParams): any;

interface IParams {
  type: 'nodeClick';
  series: BarSeries;
  datum: any;
  xKey: string;
  yKey: string;
}

Line Series Configuration

Configuration for line series.

line: {
  xKey?: string;
  xName: string;
  yKey?: string;
  yName: string;
  data?: object[];
  visible: boolean; // default: true
  showInLegend: boolean; // default: true
  tooltip: ITooltip;
  title: string;
  stroke: string; // default: '#aa4520'
  strokeOpacity: number; // default: 1
  strokeWidth: number; // default: 1
  marker: IMarker;
  highlightStyle: IHighlightStyle;
  lineDash: number[]; // default: []
  lineDashOffset: number; // default: 0
  listeners: IListeners;
}

tooltip

Series-specific tooltip configuration.

line: {
  ...
  tooltip: {
    enabled: boolean; // default: true
    renderer: Function;
  }
}

function (params: IParams): string;

interface IParams {
  datum: any;
  title?: string;
  color?: string;
  xKey: string;
  xValue: any;
  xName?: string;
  yKey: string;
  yValue: any;
  yName?: string;
}

marker

Configuration for the markers used in the series.

line: {
  ...
  marker: {
    enabled: boolean; // default: true
    shape: string | Marker; // default: 'circle'
    size: number; // default: 8
    maxSize: number; // default: 30
    fill: string;
    stroke: string;
    strokeWidth: number;
    formatter: Function;
  }
}

function (params: IParams): IReturn;

interface IParams {
  datum: any;
  fill: string;
  stroke: string;
  strokeWidth: number;
  size: number;
  highlighted: boolean;
  xKey: string;
  yKey: string;
}

interface IReturn {
  fill: string;
  stroke: string;
  strokeWidth: number;
  size: number;
}

highlightStyle

Configuration for the highlighting used when the markers are hovered over.

line: {
  ...
  highlightStyle: {
    fill: string; // default: 'yellow'
    stroke: string;
  }
}

listeners

A map of event names to event listeners.

line: {
  ...
  listeners: {
    nodeClick: Function;
  }
}

function (params: IParams): any;

interface IParams {
  type: 'nodeClick';
  series: LineSeries;
  datum: any;
  xKey: string;
  yKey: string;
}

Area Series Configuration

Configuration for area series.

area: {
  xKey?: string;
  xName: string;
  yKeys?: string[];
  yNames: string[];
  data?: object[];
  visible: boolean; // default: true
  showInLegend: boolean; // default: true
  tooltip: ITooltip;
  normalizedTo: number;
  fills: string[]; // default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888']
  fillOpacity: number; // default: 1
  strokes: string[]; // default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
  strokeOpacity: number; // default: 1
  strokeWidth: number; // default: 1
  marker: IMarker;
  highlightStyle: IHighlightStyle;
  lineDash: number[]; // default: []
  lineDashOffset: number; // default: 0
  shadow: IShadow;
}

tooltip

Series-specific tooltip configuration.

area: {
  ...
  tooltip: {
    enabled: boolean; // default: true
    renderer: Function;
  }
}

function (params: IParams): string;

interface IParams {
  datum: any;
  title?: string;
  color?: string;
  xKey: string;
  xValue: any;
  xName?: string;
  yKey: string;
  yValue: any;
  yName?: string;
}

marker

Configuration for the markers used in the series.

area: {
  ...
  marker: {
    enabled: boolean; // default: false
    shape: string | Marker; // default: 'circle'
    size: number; // default: 8
    maxSize: number; // default: 30
    fill: string;
    stroke: string;
    strokeWidth: number;
    formatter: Function;
  }
}

function (params: IParams): IReturn;

interface IParams {
  datum: any;
  fill: string;
  stroke: string;
  strokeWidth: number;
  size: number;
  highlighted: boolean;
  xKey: string;
  yKey: string;
}

interface IReturn {
  fill: string;
  stroke: string;
  strokeWidth: number;
  size: number;
}

highlightStyle

Configuration for the highlighting used when the markers are hovered over.

area: {
  ...
  highlightStyle: {
    fill: string; // default: 'yellow'
    stroke: string;
  }
}

shadow

Configuration for the shadow used behind the chart series.

area: {
  ...
  shadow: {
    enabled: boolean; // default: true
    color: string; // default: 'rgba(0, 0, 0, 0.5)'
    xOffset: number; // default: 0
    yOffset: number; // default: 0
    blur: number; // default: 5
  }
}

Scatter/Bubble Series Configuration

Configuration for scatter/bubble series.

scatter: {
  xKey?: string;
  xName: string;
  yKey?: string;
  yName: string;
  sizeKey: string;
  sizeName: string;
  labelKey: string;
  labelName: string;
  data?: object[];
  visible: boolean; // default: true
  showInLegend: boolean; // default: true
  tooltip: ITooltip;
  title: string;
  fill: string; // default: '#f3622d'
  fillOpacity: number; // default: 1
  stroke: string; // default: '#aa4520'
  strokeOpacity: number; // default: 1
  strokeWidth: number; // default: 1
  marker: IMarker;
  highlightStyle: IHighlightStyle;
  listeners: IListeners;
}

tooltip

Series-specific tooltip configuration.

scatter: {
  ...
  tooltip: {
    enabled: boolean; // default: true
    renderer: Function;
  }
}

function (params: IParams): string;

interface IParams {
  datum: any;
  title?: string;
  color?: string;
  xKey: string;
  xValue: any;
  xName?: string;
  yKey: string;
  yValue: any;
  yName?: string;
  sizeKey?: string;
  sizeName?: string;
  labelKey?: string;
  labelName?: string;
}

marker

Configuration for the markers used in the series.

scatter: {
  ...
  marker: {
    enabled: boolean; // default: true
    shape: string | Marker; // default: 'circle'
    size: number; // default: 8
    maxSize: number; // default: 30
    fill: string;
    stroke: string;
    strokeWidth: number;
    formatter: Function;
  }
}

function (params: IParams): IReturn;

interface IParams {
  datum: any;
  fill: string;
  stroke: string;
  strokeWidth: number;
  size: number;
  highlighted: boolean;
  xKey: string;
  yKey: string;
}

interface IReturn {
  fill: string;
  stroke: string;
  strokeWidth: number;
  size: number;
}

highlightStyle

Configuration for the highlighting used when the markers are hovered over.

scatter: {
  ...
  highlightStyle: {
    fill: string; // default: 'yellow'
    stroke: string;
  }
}

listeners

A map of event names to event listeners.

scatter: {
  ...
  listeners: {
    nodeClick: Function;
  }
}

function (params: IParams): any;

interface IParams {
  type: 'nodeClick';
  series: ScatterSeries;
  datum: any;
  xKey: string;
  yKey: string;
  sizeKey?: string;
}

Pie/Doughnut Series Configuration

Configuration for pie/doughnut series.

pie: {
  angleKey?: string;
  angleName: string;
  labelKey?: string;
  labelName: string;
  radiusKey: string;
  radiusName: string;
  data?: object[];
  visible: boolean; // default: true
  showInLegend: boolean; // default: true
  tooltip: ITooltip;
  lineDash: number[]; // default: []
  lineDashOffset: number; // default: 0
  rotation: number; // default: 0
  innerRadiusOffset: number; // default: 0
  outerRadiusOffset: number; // default: 0
  title: ITitle;
  fills: string[]; // default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888']
  fillOpacity: number; // default: 1
  strokes: string[]; // default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
  strokeOpacity: number; // default: 1
  strokeWidth: number; // default: 1
  highlightStyle: IHighlightStyle;
  label: ILabel;
  callout: ICallout;
  shadow: IShadow;
  listeners: IListeners;
}

tooltip

Series-specific tooltip configuration.

pie: {
  ...
  tooltip: {
    enabled: boolean; // default: true
    renderer: Function;
  }
}

function (params: IParams): string;

interface IParams {
  datum: any;
  title?: string;
  color?: string;
  angleKey: string;
  angleValue: any;
  angleName?: string;
  radiusKey?: string;
  radiusValue?: any;
  radiusName?: string;
  labelKey?: string;
  labelName?: string;
}

title

Configuration for the series title.

pie: {
  ...
  title: {
    enabled: boolean; // default: true
    text: string;
    color: string; // default: '#000000'
    fontStyle: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
    fontSize: number; // default: 10
    fontFamily: string; // default: 'Verdana, sans-serif'
  }
}

highlightStyle

Configuration for the highlighting used when the segments are hovered over.

pie: {
  ...
  highlightStyle: {
    fill: string; // default: 'yellow'
    stroke: string;
  }
}

label

Configuration for the labels used for the segments.

pie: {
  ...
  label: {
    enabled: boolean; // default: true
    color: string; // default: '#000000'
    fontStyle: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
    fontSize: number; // default: 12
    fontFamily: string; // default: 'Verdana, sans-serif'
    offset: number; // default: 3
    minAngle: number; // default: 20
    formatter: Function;
  }
}

function (params: IParams): string;

interface IParams {
  value: string;
}

callout

Configuration for the callouts used with the labels for the segments.

pie: {
  ...
  callout: {
    colors: string[]; // default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
    strokeWidth: number; // default: 1
    length: number; // default: 10
  }
}

shadow

Configuration for the shadow used behind the chart series.

pie: {
  ...
  shadow: {
    enabled: boolean; // default: true
    color: string; // default: 'rgba(0, 0, 0, 0.5)'
    xOffset: number; // default: 0
    yOffset: number; // default: 0
    blur: number; // default: 5
  }
}

listeners

A map of event names to event listeners.

pie: {
  ...
  listeners: {
    nodeClick: Function;
  }
}

function (params: IParams): any;

interface IParams {
  type: 'nodeClick';
  series: PieSeries;
  datum: any;
  angleKey: string;
  radiusKey?: string;
}

Histogram Series Configuration

Configuration for histogram series.

histogram: {
  data?: object[];
  visible: boolean; // default: true
  showInLegend: boolean; // default: true
  tooltip: ITooltip;
  xKey?: string;
  xName: string;
  yKey: string;
  yName: string;
  binCount: number; // default: 10
  bins: number[][];
  aggregation: string; // default: 'sum'
  areaPlot: boolean; // default: 'false'
  lineDash: number[]; // default: []
  lineDashOffset: number; // default: 0
  highlightStyle: IHighlightStyle;
  fill: string; // default: '#f3622d'
  fillOpacity: number; // default: 1
  stroke: string; // default: '#aa4520'
  strokeOpacity: number; // default: 1
  strokeWidth: number; // default: 1
  listeners: IListeners;
}

tooltip

Series-specific tooltip configuration.

histogram: {
  ...
  tooltip: {
    enabled: boolean; // default: true
    renderer: Function;
  }
}

function (params: IParams): string;

interface IParams {
  datum: any;
  title?: string;
  color?: string;
  xKey: string;
  xValue: any;
  xName?: string;
  yKey: string;
  yValue: any;
  yName?: string;
  sizeKey?: string;
  sizeName?: string;
  labelKey?: string;
  labelName?: string;
}

highlightStyle

Configuration for the highlighting used when the bars are hovered over.

histogram: {
  ...
  highlightStyle: {
    fill: string; // default: 'yellow'
    stroke: string;
  }
}

listeners

A map of event names to event listeners.

histogram: {
  ...
  listeners: {
    nodeClick: Function;
  }
}

function (params: IParams): any;

interface IParams {
  type: 'nodeClick';
  series: HistogramSeries;
  datum: any;
  xKey: string;
}