JavaScript Charts: API Reference
This page documents the AG Charts API. You can find more details about getting started with AG Charts in the Getting Started section. You can also explore the API and see in real-time how different options affect charts using the API Explorer.
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;
}
data Required | The data to render the chart from. If this is not specified, it must be set on individual series instead. |
container | The element to place the rendered chart into. Important: make sure to read the autoSize config description for information on how the container element affects the chart size (by default). |
autoSize | By default, the chart will resize automatically to fill the container element. Set this to false to disable this behaviour. If either the width or height are set, auto-sizing will be disabled unless this is explicitly set to true .Important: if this config is set to true , make sure to give the chart's container element an explicit size, otherwise you will run into a chicken and egg situation where the container expects to size itself according to the content and the chart expects to size itself according to the container.Default: true |
width | The width of the chart in pixels. Has no effect if autoSize is set to true . |
height | The height of the chart in pixels. Has no effect if autoSize is set to true . |
tooltip | Global configuration that applies to all tooltips in the chart. See tooltip for more details about this configuration object. |
padding | Configuration for the padding shown around the chart. See padding for more details about this configuration object. |
background | Configuration for the background shown behind the chart. See background for more details about this configuration object. |
title | Configuration for the title shown at the top of the chart. See title for more details about this configuration object. |
subtitle | Configuration for the subtitle shown beneath the chart title. Note: a subtitle will only be shown if a title is also present. See subtitle for more details about this configuration object. |
legend | Configuration for the chart legend. See legend for more details about this configuration object. |
navigator | Configuration for the chart navigator. This config is only supported by cartesian charts. See navigator for more details about this configuration object. |
tooltip
Global configuration that applies to all tooltips in the chart.
chart: {
...
tooltip: {
enabled: boolean; // default: true
tracking: boolean; // default: true
class: string;
}
}
enabled | Set to false to disable tooltips for all series in the chart. Default: true |
tracking | If true, for series with markers the tooltip will be shown to the closest marker. Default: true |
class | A class name to be added to the tooltip element of the chart. |
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
}
}
top | The number of pixels of padding at the top of the chart area. Default: 20 |
right | The number of pixels of padding at the right of the chart area. Default: 20 |
bottom | The number of pixels of padding at the bottom of the chart area. Default: 20 |
left | The number of pixels of padding at the left of the chart area. Default: 20 |
background
Configuration for the background shown behind the chart.
chart: {
...
background: {
fill: string; // default: '#FFFFFF'
visible: boolean; // default: true
}
}
fill | Colour of the chart background. Default: '#FFFFFF' |
visible | Whether or not the background should be visible. 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'
}
}
enabled | Whether or not the title should be shown. Default: true |
text | The text to show in the title. Default: 'Title' |
color | The colour to use for the title. Default: '#000000' |
fontStyle | The font style to use for the title. Default: 'normal' Options: 'normal' , 'italic' , 'oblique' |
fontWeight | The font weight to use for the title. Default: 'bold' Options: 'normal' , 'bold' , 'bolder' , 'lighter' , '100' , '200' , '300' , '400' , '500' , '600' , '700' , '800' , '900' |
fontSize | The font size in pixels to use for the title. Default: 18 |
fontFamily | The font family to use for the title. 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'
}
}
enabled | Whether or not the subtitle should be shown. Default: true |
text | The text to show in the subtitle. Default: 'Subtitle' |
color | The colour to use for the subtitle. Default: '#000000' |
fontStyle | The font style to use for the subtitle. Default: 'normal' Options: 'normal' , 'italic' , 'oblique' |
fontWeight | The font weight to use for the subtitle. Default: 'normal' Options: 'normal' , 'bold' , 'bolder' , 'lighter' , '100' , '200' , '300' , '400' , '500' , '600' , '700' , '800' , '900' |
fontSize | The font size in pixels to use for the subtitle. Default: 14 |
fontFamily | The font family to use for the subtitle. 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;
}
}
enabled | Whether or not to show the legend. Default: true |
position | Where the legend should show in relation to the chart. Default: 'right' Options: 'top' , 'right' , 'bottom' , 'left' |
spacing | The spacing in pixels to use outside the legend. Default: 20 |
item | Configuration for the legend items that consist of a marker and a label. See item for more details about this configuration object. |
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;
}
}
}
paddingX | The horizontal spacing in pixels to use between legend items. Default: 16 |
paddingY | The vertical spacing in pixels to use between legend items. Default: 8 |
marker | Configuration for the legend markers. See marker for more details about this configuration object. |
label | Configuration for the legend labels. See label for more details about this configuration object. |
marker
Configuration for the legend markers.
chart: {
...
legend: {
...
item: {
...
marker: {
padding: number; // default: 8
shape: string;
size: number; // default: 15
strokeWidth: number; // default: 1
}
}
}
}
padding | The padding in pixels between a legend marker and the corresponding label. Default: 8 |
shape | If set, overrides the marker shape from the series and the legend will show the specified marker shape instead. If not set, will use a marker shape matching the shape from the series, or fall back to 'square' if there is none.Options: 'circle' , 'cross' , 'diamond' , 'plus' , 'square' , 'triangle' |
size | The size in pixels of the markers in the legend. Default: 15 |
strokeWidth | The width in pixels of the stroke for markers in the legend. 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;
}
}
}
}
color | The colour of the text. Default: 'black' |
fontStyle | The font style to use for the legend. Default: 'normal' Options: 'normal' , 'italic' , 'oblique' |
fontWeight | The font weight to use for the legend. Default: 'normal' Options: 'normal' , 'bold' , 'bolder' , 'lighter' , '100' , '200' , '300' , '400' , '500' , '600' , '700' , '800' , '900' |
fontSize | The font size in pixels to use for the legend. Default: 12 |
fontFamily | The font family to use for the legend. Default: 'Verdana, sans-serif' |
formatter | Function used to render legend labels. Where id is a series ID, itemId is component ID within a series, such as a field name or an item index.
|
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;
}
}
enabled | Whether or not to show the navigator. Default: false |
height | The height of the navigator. Default: 30 |
margin | The distance between the navigator and the bottom axis. Default: 10 |
min | The start of the visible range in the [0, 1] interval.Default: 0 |
max | The end of the visible range in the [0, 1] interval.Default: 1 |
mask | Configuration for the navigator's visible range mask. See mask for more details about this configuration object. |
minHandle | Configuration for the navigator's left handle. See minHandle for more details about this configuration object. |
maxHandle | Configuration for the navigator's right handle. See maxHandle for more details about this configuration object. |
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
}
}
}
fill | The fill colour used by the mask. Default: '#999999' |
stroke | The stroke colour used by the mask. Default: '#999999' |
strokeWidth | The stroke width used by the mask. Default: 1 |
fillOpacity | The opacity of the mask's fill in the [0, 1] interval, where 0 is effectively no masking.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
}
}
}
fill | The fill colour used by the handle. Default: '#f2f2f2' |
stroke | The stroke colour used by the handle. Default: '#999999' |
strokeWidth | The stroke width used by the handle. Default: 1 |
width | The width of the handle. Default: 8 |
height | The height of the handle. Default: 16 |
gripLineLength | The length of the handle's grip lines. Default: 8 |
gripLineGap | The distance between the handle's grip lines. 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
}
}
}
fill | The fill colour used by the handle. Default: '#f2f2f2' |
stroke | The stroke colour used by the handle. Default: '#999999' |
strokeWidth | The stroke width used by the handle. Default: 1 |
width | The width of the handle. Default: 8 |
height | The height of the handle. Default: 16 |
gripLineLength | The length of the handle's grip lines. Default: 8 |
gripLineGap | The distance between the handle's grip lines. 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;
}
type | The type of the axis. Options: 'category' , 'number' , 'time' |
position | The position on the chart where the axis should be rendered. Options: 'top' , 'right' , 'bottom' , 'left' |
nice | If 'true', the range will be rounded up to ensure nice equal spacing between the ticks. Applies to continuous axes only ('number', 'time'). Default: true |
min | User override for the automatically determinted min value (based on series data). Only applied to "number" axes. |
max | User override for the automatically determinted max value (based on series data). Only applied to "number" axes. |
title | Configuration for the title shown next to the axis. See title for more details about this configuration object. |
line | Configuration for the axis line. See line for more details about this configuration object. |
tick | Configuration for the axis ticks. See tick for more details about this configuration object. |
label | Configuration for the axis labels, shown next to the ticks. See label for more details about this configuration object. |
gridStyle | Configuration of the lines used to form the grid in the chart area. See gridStyle for more details about this configuration object. |
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'
}
}
enabled | Whether or not the axis title should be shown. Default: true |
text | The text to show in the axis title. Default: 'Axis Title' |
color | The colour to use for the axis title. Default: '#000000' |
fontStyle | The font style to use for the axis title. Default: 'normal' Options: 'normal' , 'italic' , 'oblique' |
fontWeight | The font weight to use for the axis title. Default: 'bold' Options: 'normal' , 'bold' , 'bolder' , 'lighter' , '100' , '200' , '300' , '400' , '500' , '600' , '700' , '800' , '900' |
fontSize | The font size in pixels to use for the axis title. Default: 14 |
fontFamily | The font family to use for the axis title. Default: 'Verdana, sans-serif' |
line
Configuration for the axis line.
axis: {
...
line: {
width: number; // default: 1
color: string; // default: 'rgba(195, 195, 195, 1)'
}
}
width | The width in pixels of the axis line. Default: 1 |
color | The colour of the axis line. 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
}
}
width | The width in pixels of the axis ticks (and corresponding grid line). Default: 1 |
size | The length in pixels of the axis ticks. Default: 6 |
color | The colour of the axis ticks. Default: 'rgba(195, 195, 195, 1)' |
count | A hint of how many ticks to use across an axis. The axis is not guaranteed to use exactly this number of ticks, but will try to use a number of ticks that is close to the number given. 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;
}
}
fontStyle | The font style to use for the labels. Default: 'normal' Options: 'normal' , 'italic' , 'oblique' |
fontWeight | The font weight to use for the labels. Default: 'normal' Options: 'normal' , 'bold' , 'bolder' , 'lighter' , '100' , '200' , '300' , '400' , '500' , '600' , '700' , '800' , '900' |
fontSize | The font size in pixels to use for the labels. Default: 12 |
fontFamily | The font family to use for the labels. Default: 'Verdana, sans-serif' |
color | The colour to use for the labels. Default: '#000000' |
padding | Padding in pixels between the axis label and the tick. Default: 5 |
rotation | The rotation of the axis labels in degrees. Note: for integrated charts the default is 335 degrees, unless the axis shows grouped or default categories (indexes). The first row of labels in a grouped category axis is rotated perpendicular to the axis line. Default: 0 |
format | Format string used when rendering labels for time axes. For more information on the structure of the string, click here. |
formatter | Function used to render axis labels. If value is a number, fractionDigits will also be provided, which indicates the number of fractional digits used in the step between ticks; for example, a tick step of 0.0005 would have fractionDigits set to 4 .
|
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]
}
}
stroke | The colour of the grid line. Default: 'rgba(195, 195, 195, 1)' |
lineDash | Defines how the gridlines are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, [6, 3] means dashes with a length of 6 pixels with gaps between of 3 pixels.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;
}
xKey Required | The key to use to retrieve x-values from the data. |
xName | A human-readable description of the x-values. |
yKeys Required | The keys to use to retrieve y-values from the data. |
yNames | Human-readable descriptions of the y-values. |
data Required | The data to use when rendering the series. If this is not supplied, data must be set on the chart instead. |
visible | Whether or not to display the series. Default: true |
showInLegend | Whether or not to include the series in the legend. Default: true |
tooltip | Series-specific tooltip configuration. See tooltip for more details about this configuration object. |
grouped | Whether to show different y-values as separate bars (grouped) or not (stacked). Default: false |
normalizedTo | The number to normalise the bar stacks to. Has no effect when grouped is true . For example, if normalizedTo is set to 100 , the bar stacks will all be scaled proportionally so that each of their totals is 100. |
fills | The colours to cycle through for the fills of the bars. Default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888'] |
fillOpacity | The opacity of the fill for the bars. Default: 1 |
strokes | The colours to cycle through for the strokes of the bars. Default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f'] |
strokeOpacity | The opacity of the stroke for the bars. Default: 1 |
strokeWidth | The width in pixels of the stroke for the bars. Default: 1 |
highlightStyle | Configuration for the highlighting used when the bars are hovered over. See highlightStyle for more details about this configuration object. |
shadow | Configuration for the shadow used behind the chart series. See shadow for more details about this configuration object. |
lineDash | Defines how the bar/column strokes are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, [6, 3] means dashes with a length of 6 pixels with gaps between of 3 pixels.Default: [] |
lineDashOffset | The initial offset of the dashed line in pixels. Default: 0 |
label | Configuration for the labels shown on bars. See label for more details about this configuration object. |
formatter | Function used to return formatting for individual bars/columns, based on the given parameters. If the current bar/column is highlighted, the highlighted property will be set to true ; make sure to check this if you want to differentiate between the highlighted and un-highlighted states.
|
listeners | A map of event names to event listeners. See listeners for more details about this configuration object. |
tooltip
Series-specific tooltip configuration.
bar: {
...
tooltip: {
enabled: boolean; // default: true
renderer: Function;
}
}
enabled | Whether or not to show tooltips when the series are hovered over. Default: true |
renderer | Function used to create the content for tooltips.
|
highlightStyle
Configuration for the highlighting used when the bars are hovered over.
bar: {
...
highlightStyle: {
fill: string; // default: 'yellow'
stroke: string;
}
}
fill | The fill colour of the bars when hovered over. Default: 'yellow' |
stroke | The colour of the stroke around the bars when hovered over. |
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
}
}
enabled | Whether or not the shadow is visible. Default: true |
color | The colour of the shadow. Default: 'rgba(0, 0, 0, 0.5)' |
xOffset | The horizontal offset in pixels for the shadow. Default: 0 |
yOffset | The vertical offset in pixels for the shadow. Default: 0 |
blur | The radius of the shadow's blur, given in pixels. 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'
}
}
enabled | Whether or not the labels should be shown. Default: true |
color | The colour to use for the labels. Default: 'rgba(70, 70, 70, 1)' |
fontStyle | The font style to use for the labels. Default: 'normal' Options: 'normal' , 'italic' , 'oblique' |
fontWeight | The font weight to use for the labels. Default: 'normal' Options: 'normal' , 'bold' , 'bolder' , 'lighter' , '100' , '200' , '300' , '400' , '500' , '600' , '700' , '800' , '900' |
fontSize | The font size in pixels to use for the labels. Default: 12 |
fontFamily | The font family to use for the labels. Default: 'Verdana, sans-serif' |
listeners
A map of event names to event listeners.
bar: {
...
listeners: {
nodeClick: Function;
}
}
nodeClick | The listener to call when a bar/column node is clicked.
|
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;
}
xKey Required | The key to use to retrieve x-values from the data. |
xName | A human-readable description of the x-values. |
yKey Required | The key to use to retrieve y-values from the data. |
yName | A human-readable description of the y-values. |
data Required | The data to use when rendering the series. If this is not supplied, data must be set on the chart instead. |
visible | Whether or not to display the series. Default: true |
showInLegend | Whether or not to include the series in the legend. Default: true |
tooltip | Series-specific tooltip configuration. See tooltip for more details about this configuration object. |
title | The title to use for the series. Defaults to yName if it exists, or yKey if not. |
stroke | The colour of the stroke for the lines. Default: '#aa4520' |
strokeOpacity | The opacity of the stroke for the lines. Default: 1 |
strokeWidth | The width in pixels of the stroke for the lines. Default: 1 |
marker | Configuration for the markers used in the series. See marker for more details about this configuration object. |
highlightStyle | Configuration for the highlighting used when the markers are hovered over. See highlightStyle for more details about this configuration object. |
lineDash | Defines how the line stroke is rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, [6, 3] means dashes with a length of 6 pixels with gaps between of 3 pixels.Default: [] |
lineDashOffset | The initial offset of the dashed line in pixels. Default: 0 |
listeners | A map of event names to event listeners. See listeners for more details about this configuration object. |
tooltip
Series-specific tooltip configuration.
line: {
...
tooltip: {
enabled: boolean; // default: true
renderer: Function;
}
}
enabled | Whether or not to show tooltips when the series are hovered over. Default: true |
renderer | Function used to create the content for tooltips.
|
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;
}
}
enabled | Whether or not to show markers. Default: true |
shape | The shape to use for the markers. You can also supply a custom marker by providing a Marker subclass.Default: 'circle' Options: 'circle' , 'cross' , 'diamond' , 'plus' , 'square' , 'triangle' |
size | The size in pixels of the markers. Default: 8 |
maxSize | For series where the size of the marker is determined by the data, this determines the largest size a marker can be in pixels. Default: 30 |
fill | The colour to use for marker fills. If this is not specified, the markers will take their fill from the series. |
stroke | The colour to use for marker strokes. If this is not specified, the markers will take their stroke from the series. |
strokeWidth | The width in pixels of the marker stroke. If this is not specified, the markers will take their stroke width from the series. |
formatter | Function used to return formatting for individual markers, based on the supplied information. If the current marker is highlighted, the highlighted property will be set to true ; make sure to check this if you want to differentiate between the highlighted and un-highlighted states.
|
highlightStyle
Configuration for the highlighting used when the markers are hovered over.
line: {
...
highlightStyle: {
fill: string; // default: 'yellow'
stroke: string;
}
}
fill | The fill colour of the markers when hovered over. Default: 'yellow' |
stroke | The colour of the stroke around the markers when hovered over. |
listeners
A map of event names to event listeners.
line: {
...
listeners: {
nodeClick: Function;
}
}
nodeClick | The listener to call when a line series node (marker) is clicked.
|
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;
}
xKey Required | The key to use to retrieve x-values from the data. |
xName | A human-readable description of the x-values. |
yKeys Required | The keys to use to retrieve y-values from the data. |
yNames | Human-readable descriptions of the y-values. |
data Required | The data to use when rendering the series. If this is not supplied, data must be set on the chart instead. |
visible | Whether or not to display the series. Default: true |
showInLegend | Whether or not to include the series in the legend. Default: true |
tooltip | Series-specific tooltip configuration. See tooltip for more details about this configuration object. |
normalizedTo | The number to normalise the area stacks to. For example, if normalizedTo is set to 100 , the stacks will all be scaled proportionally so that their total height is always 100. |
fills | The colours to cycle through for the fills of the areas. Default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888'] |
fillOpacity | The opacity of the fill for the areas. Default: 1 |
strokes | The colours to cycle through for the strokes of the areas. Default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f'] |
strokeOpacity | The opacity of the stroke for the areas. Default: 1 |
strokeWidth | The width in pixels of the stroke for the areas. Default: 1 |
marker | Configuration for the markers used in the series. See marker for more details about this configuration object. |
highlightStyle | Configuration for the highlighting used when the markers are hovered over. See highlightStyle for more details about this configuration object. |
lineDash | Defines how the area strokes are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, [6, 3] means dashes with a length of 6 pixels with gaps between of 3 pixels.Default: [] |
lineDashOffset | The initial offset of the dashed line in pixels. Default: 0 |
shadow | Configuration for the shadow used behind the chart series. See shadow for more details about this configuration object. |
tooltip
Series-specific tooltip configuration.
area: {
...
tooltip: {
enabled: boolean; // default: true
renderer: Function;
}
}
enabled | Whether or not to show tooltips when the series are hovered over. Default: true |
renderer | Function used to create the content for tooltips.
|
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;
}
}
enabled | Whether or not to show markers. Default: false |
shape | The shape to use for the markers. You can also supply a custom marker by providing a Marker subclass.Default: 'circle' Options: 'circle' , 'cross' , 'diamond' , 'plus' , 'square' , 'triangle' |
size | The size in pixels of the markers. Default: 8 |
maxSize | For series where the size of the marker is determined by the data, this determines the largest size a marker can be in pixels. Default: 30 |
fill | The colour to use for marker fills. If this is not specified, the markers will take their fill from the series. |
stroke | The colour to use for marker strokes. If this is not specified, the markers will take their stroke from the series. |
strokeWidth | The width in pixels of the marker stroke. If this is not specified, the markers will take their stroke width from the series. |
formatter | Function used to return formatting for individual markers, based on the supplied information. If the current marker is highlighted, the highlighted property will be set to true ; make sure to check this if you want to differentiate between the highlighted and un-highlighted states.
|
highlightStyle
Configuration for the highlighting used when the markers are hovered over.
area: {
...
highlightStyle: {
fill: string; // default: 'yellow'
stroke: string;
}
}
fill | The fill colour of the markers when hovered over. Default: 'yellow' |
stroke | The colour of the stroke around the markers when hovered over. |
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
}
}
enabled | Whether or not the shadow is visible. Default: true |
color | The colour of the shadow. Default: 'rgba(0, 0, 0, 0.5)' |
xOffset | The horizontal offset in pixels for the shadow. Default: 0 |
yOffset | The vertical offset in pixels for the shadow. Default: 0 |
blur | The radius of the shadow's blur, given in pixels. 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;
}
xKey Required | The key to use to retrieve x-values from the data. |
xName | A human-readable description of the x-values. |
yKey Required | The key to use to retrieve y-values from the data. |
yName | A human-readable description of the y-values. |
sizeKey | The key to use to retrieve size values from the data, used to control the size of the markers in bubble charts. |
sizeName | A human-readable description of the size values. |
labelKey | The key to use to retrieve values from the data to use as labels for the markers. |
labelName | A human-readable description of the label values. |
data Required | The data to use when rendering the series. If this is not supplied, data must be set on the chart instead. |
visible | Whether or not to display the series. Default: true |
showInLegend | Whether or not to include the series in the legend. Default: true |
tooltip | Series-specific tooltip configuration. See tooltip for more details about this configuration object. |
title | The title to use for the series. Defaults to yName if it exists, or yKey if not. |
fill | The colour of the fill for the markers. Default: '#f3622d' |
fillOpacity | The opacity of the fill for the markers. Default: 1 |
stroke | The colour of the stroke for the markers. Default: '#aa4520' |
strokeOpacity | The opacity of the stroke for the markers. Default: 1 |
strokeWidth | The width in pixels of the stroke for the markers. Default: 1 |
marker | Configuration for the markers used in the series. See marker for more details about this configuration object. |
highlightStyle | Configuration for the highlighting used when the markers are hovered over. See highlightStyle for more details about this configuration object. |
listeners | A map of event names to event listeners. See listeners for more details about this configuration object. |
tooltip
Series-specific tooltip configuration.
scatter: {
...
tooltip: {
enabled: boolean; // default: true
renderer: Function;
}
}
enabled | Whether or not to show tooltips when the series are hovered over. Default: true |
renderer | Function used to create the content for tooltips.
|
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;
}
}
enabled | Whether or not to show markers. Default: true |
shape | The shape to use for the markers. You can also supply a custom marker by providing a Marker subclass.Default: 'circle' Options: 'circle' , 'cross' , 'diamond' , 'plus' , 'square' , 'triangle' |
size | The size in pixels of the markers. Default: 8 |
maxSize | For series where the size of the marker is determined by the data, this determines the largest size a marker can be in pixels. Default: 30 |
fill | The colour to use for marker fills. If this is not specified, the markers will take their fill from the series. |
stroke | The colour to use for marker strokes. If this is not specified, the markers will take their stroke from the series. |
strokeWidth | The width in pixels of the marker stroke. If this is not specified, the markers will take their stroke width from the series. |
formatter | Function used to return formatting for individual markers, based on the supplied information. If the current marker is highlighted, the highlighted property will be set to true ; make sure to check this if you want to differentiate between the highlighted and un-highlighted states.
|
highlightStyle
Configuration for the highlighting used when the markers are hovered over.
scatter: {
...
highlightStyle: {
fill: string; // default: 'yellow'
stroke: string;
}
}
fill | The fill colour of the markers when hovered over. Default: 'yellow' |
stroke | The colour of the stroke around the markers when hovered over. |
listeners
A map of event names to event listeners.
scatter: {
...
listeners: {
nodeClick: Function;
}
}
nodeClick | The listener to call when a scatter series node (marker) is clicked.
|
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;
}
angleKey Required | The key to use to retrieve angle values from the data. |
angleName | A human-readable description of the angle values. |
labelKey Required | The key to use to retrieve label values from the data. |
labelName | A human-readable description of the label values. |
radiusKey | The key to use to retrieve radius values from the data. |
radiusName | A human-readable description of the radius values. |
data Required | The data to use when rendering the series. If this is not supplied, data must be set on the chart instead. |
visible | Whether or not to display the series. Default: true |
showInLegend | Whether or not to include the series in the legend. Default: true |
tooltip | Series-specific tooltip configuration. See tooltip for more details about this configuration object. |
lineDash | Defines how the pie sector strokes are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, [6, 3] means dashes with a length of 6 pixels with gaps between of 3 pixels.Default: [] |
lineDashOffset | The initial offset of the dashed line in pixels. Default: 0 |
rotation | The rotation of the pie series in degrees. Default: 0 |
innerRadiusOffset | The offset in pixels of the inner radius of the series. Used to construct doughnut charts. If this is not given, or a value of zero is given, a pie chart will be rendered. Default: 0 |
outerRadiusOffset | The offset in pixels of the outer radius of the series. Used to construct doughnut charts. Default: 0 |
title | Configuration for the series title. See title for more details about this configuration object. |
fills | The colours to cycle through for the fills of the segments. Default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888'] |
fillOpacity | The opacity of the fill for the segments. Default: 1 |
strokes | The colours to cycle through for the strokes of the segments. Default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f'] |
strokeOpacity | The opacity of the stroke for the segments. Default: 1 |
strokeWidth | The width in pixels of the stroke for the segments. Default: 1 |
highlightStyle | Configuration for the highlighting used when the segments are hovered over. See highlightStyle for more details about this configuration object. |
label | Configuration for the labels used for the segments. See label for more details about this configuration object. |
callout | Configuration for the callouts used with the labels for the segments. See callout for more details about this configuration object. |
shadow | Configuration for the shadow used behind the chart series. See shadow for more details about this configuration object. |
listeners | A map of event names to event listeners. See listeners for more details about this configuration object. |
tooltip
Series-specific tooltip configuration.
pie: {
...
tooltip: {
enabled: boolean; // default: true
renderer: Function;
}
}
enabled | Whether or not to show tooltips when the series are hovered over. Default: true |
renderer | Function used to create the content for tooltips.
|
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'
}
}
enabled | Whether or not the title should be shown. Default: true |
text | The text to show in the title. |
color | The colour to use for the title. Default: '#000000' |
fontStyle | The font style to use for the title. Default: 'normal' Options: 'normal' , 'italic' , 'oblique' |
fontWeight | The font weight to use for the title. Default: 'normal' Options: 'normal' , 'bold' , 'bolder' , 'lighter' , '100' , '200' , '300' , '400' , '500' , '600' , '700' , '800' , '900' |
fontSize | The font size in pixels to use for the title. Default: 10 |
fontFamily | The font family to use for the title. Default: 'Verdana, sans-serif' |
highlightStyle
Configuration for the highlighting used when the segments are hovered over.
pie: {
...
highlightStyle: {
fill: string; // default: 'yellow'
stroke: string;
}
}
fill | The fill colour of the segments when hovered over. Default: 'yellow' |
stroke | The colour of the stroke around the segments when hovered over. |
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;
}
}
enabled | Whether or not the labels should be shown. Default: true |
color | The colour to use for the labels. Default: '#000000' |
fontStyle | The font style to use for the labels. Default: 'normal' Options: 'normal' , 'italic' , 'oblique' |
fontWeight | The font weight to use for the labels. Default: 'normal' Options: 'normal' , 'bold' , 'bolder' , 'lighter' , '100' , '200' , '300' , '400' , '500' , '600' , '700' , '800' , '900' |
fontSize | The font size in pixels to use for the labels. Default: 12 |
fontFamily | The font family to use for the labels. Default: 'Verdana, sans-serif' |
offset | Distance in pixels between the callout line and the label text. Default: 3 |
minAngle | Minimum angle in degrees required for a segment to show a label. Default: 20 |
formatter | Function used to turn 'labelKey' values into text to be displayed next to each pie sector. Be default the values are simply stringified.
|
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
}
}
colors | The colours to cycle through for the strokes of the callouts. Default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f'] |
strokeWidth | The width in pixels of the stroke for callout lines. Default: 1 |
length | The length in pixels of the callout lines. 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
}
}
enabled | Whether or not the shadow is visible. Default: true |
color | The colour of the shadow. Default: 'rgba(0, 0, 0, 0.5)' |
xOffset | The horizontal offset in pixels for the shadow. Default: 0 |
yOffset | The vertical offset in pixels for the shadow. Default: 0 |
blur | The radius of the shadow's blur, given in pixels. Default: 5 |
listeners
A map of event names to event listeners.
pie: {
...
listeners: {
nodeClick: Function;
}
}
nodeClick | The listener to call when a pie slice is clicked.
|
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;
}
data Required | The data to use when rendering the series. If this is not supplied, data must be set on the chart instead. |
visible | Whether or not to display the series. Default: true |
showInLegend | Whether or not to include the series in the legend. Default: true |
tooltip | Series-specific tooltip configuration. See tooltip for more details about this configuration object. |
xKey Required | The key to use to retrieve x-values from the data. |
xName | A human-readable description of the x-values. |
yKey | The key to use to retrieve y-values from the data. |
yName | A human-readable description of the y-values. |
binCount | The number of bins to try to split the x axis into. Clashes with the bins setting.Default: 10 |
bins | Set the bins explicitly. The bins need not be of equal width. Clashes with the binCount setting. |
aggregation | Dictates how the bins are aggregated. If set to 'sum', the value shown for the bins will be the total of the yKey values. If set to 'mean', it will display the average yKey value of the bin Default: 'sum' Options: 'sum' , 'mean' |
areaPlot | For variable width bins, if true the histogram will represent the aggregated yKey values using the area of the bar. Otherwise, the height of the var represents the value as per a normal bar chart. This is useful for keeping an undistorted curve displayed when using variable-width binsDefault: 'false' |
lineDash | Defines how the column strokes are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, [6, 3] means dashes with a length of 6 pixels with gaps between of 3 pixels.Default: [] |
lineDashOffset | The initial offset of the dashed line in pixels. Default: 0 |
highlightStyle | Configuration for the highlighting used when the bars are hovered over. See highlightStyle for more details about this configuration object. |
fill | The colour of the fill for the histogram bars. Default: '#f3622d' |
fillOpacity | The opacity of the fill for the histogram bars. Default: 1 |
stroke | The colour of the stroke for the histogram bars. Default: '#aa4520' |
strokeOpacity | The opacity of the stroke for the histogram bars. Default: 1 |
strokeWidth | The width in pixels of the stroke for the histogram bars. Default: 1 |
listeners | A map of event names to event listeners. See listeners for more details about this configuration object. |
tooltip
Series-specific tooltip configuration.
histogram: {
...
tooltip: {
enabled: boolean; // default: true
renderer: Function;
}
}
enabled | Whether or not to show tooltips when the series are hovered over. Default: true |
renderer | Function used to create the content for tooltips.
|
highlightStyle
Configuration for the highlighting used when the bars are hovered over.
histogram: {
...
highlightStyle: {
fill: string; // default: 'yellow'
stroke: string;
}
}
fill | The fill colour of the bars when hovered over. Default: 'yellow' |
stroke | The colour of the stroke around the bars when hovered over. |
listeners
A map of event names to event listeners.
histogram: {
...
listeners: {
nodeClick: Function;
}
}
nodeClick | The listener to call when a histogram bar is clicked.
|