JavaScript Charts: API Explorer
Bar
Line
Scatter
Area
Pie
Histogram
Options
Search:
dataobject[]
The data to render the chart from. If this is not specified, it must be set on individual series instead.
Required
The data to render the chart from. If this is not specified, it must be set on individual series instead.
containerHTMLElement
The element to place the rendered chart into.
Important: make sure to read the
Default: N/A
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).autoSizeboolean
By default, the chart will resize automatically to fill the container element. Set this to
Important: if this config is set to
Default:
true
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.false
true
widthnumber
The width of the chart in pixels. Has no effect if
px
Default: N/A
The width of the chart in pixels. Has no effect if
autoSize
is set to true
.px
heightnumber
The height of the chart in pixels. Has no effect if
px
Default: N/A
The height of the chart in pixels. Has no effect if
autoSize
is set to true
.px
tooltipObject❯
Global configuration that applies to all tooltips in the chart.
Global configuration that applies to all tooltips in the chart.
enabledboolean
Set to false to disable tooltips for all series in the chart.
Default:
true
Set to false to disable tooltips for all series in the chart.
false
true
trackingboolean
If true, for series with markers the tooltip will be shown to the closest marker.
Default:
true
If true, for series with markers the tooltip will be shown to the closest marker.
false
true
classstring
A class name to be added to the tooltip element of the chart.
Default: N/A
A class name to be added to the tooltip element of the chart.
paddingObject❯
Configuration for the padding shown around the chart.
Configuration for the padding shown around the chart.
topnumber
The number of pixels of padding at the top of the chart area.
Default:
20
The number of pixels of padding at the top of the chart area.
rightnumber
The number of pixels of padding at the right of the chart area.
Default:
20
The number of pixels of padding at the right of the chart area.
bottomnumber
The number of pixels of padding at the bottom of the chart area.
Default:
20
The number of pixels of padding at the bottom of the chart area.
leftnumber
The number of pixels of padding at the left of the chart area.
Default:
20
The number of pixels of padding at the left of the chart area.
backgroundObject❯
Configuration for the background shown behind the chart.
Configuration for the background shown behind the chart.
fillstring
Colour of the chart background.
Default:
'#FFFFFF'
Colour of the chart background.
visibleboolean
Whether or not the background should be visible.
Default:
true
Whether or not the background should be visible.
false
true
titleObject❯
Configuration for the title shown at the top of the chart.
Configuration for the title shown at the top of the chart.
enabledboolean
Whether or not the title should be shown.
Default:
true
Whether or not the title should be shown.
false
true
textstring
The text to show in the title.
Default:
'Title'
The text to show in the title.
colorstring
The colour to use for the title.
Default:
'#000000'
The colour to use for the title.
fontStylestring
The font style to use for the title.
Default:
'normal'
The font style to use for the title.
normal
italic
oblique
fontWeightstring
The font weight to use for the title.
Default:
'bold'
The font weight to use for the title.
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
fontSizenumber
The font size in pixels to use for the title.
px
Default:
18
The font size in pixels to use for the title.
px
fontFamilystring
The font family to use for the title.
Default:
'Verdana, sans-serif'
The font family to use for the title.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
subtitleObject❯
Configuration for the subtitle shown beneath the chart title. Note: a subtitle will only be shown if a title is also present.
Configuration for the subtitle shown beneath the chart title. Note: a subtitle will only be shown if a title is also present.
enabledboolean
Whether or not the subtitle should be shown.
Default:
true
Whether or not the subtitle should be shown.
false
true
textstring
The text to show in the subtitle.
Default:
'Subtitle'
The text to show in the subtitle.
colorstring
The colour to use for the subtitle.
Default:
'#000000'
The colour to use for the subtitle.
fontStylestring
The font style to use for the subtitle.
Default:
'normal'
The font style to use for the subtitle.
normal
italic
oblique
fontWeightstring
The font weight to use for the subtitle.
Default:
'normal'
The font weight to use for the subtitle.
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
fontSizenumber
The font size in pixels to use for the subtitle.
px
Default:
14
The font size in pixels to use for the subtitle.
px
fontFamilystring
The font family to use for the subtitle.
Default:
'Verdana, sans-serif'
The font family to use for the subtitle.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
legendObject❯
Configuration for the chart legend.
Configuration for the chart legend.
enabledboolean
Whether or not to show the legend.
Default:
true
Whether or not to show the legend.
false
true
positionstring
Where the legend should show in relation to the chart.
Default:
'right'
Where the legend should show in relation to the chart.
top
right
bottom
left
spacingnumber
The spacing in pixels to use outside the legend.
px
Default:
20
The spacing in pixels to use outside the legend.
px
layoutHorizontalSpacingnumber
The horizontal spacing in pixels to use between legend items.
px
Default:
16
The horizontal spacing in pixels to use between legend items.
px
layoutVerticalSpacingnumber
The vertical spacing in pixels to use between legend items.
px
Default:
8
The vertical spacing in pixels to use between legend items.
px
itemSpacingnumber
The spacing in pixels between a legend marker and the corresponding label.
px
Default:
8
The spacing in pixels between a legend marker and the corresponding label.
px
markerShapestring
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
Default: N/A
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.circle
cross
diamond
plus
square
triangle
markerSizenumber
The size in pixels of the markers in the legend.
px
Default:
15
The size in pixels of the markers in the legend.
px
strokeWidthnumber
The width in pixels of the stroke for markers in the legend.
px
Default:
1
The width in pixels of the stroke for markers in the legend.
px
colorstring
The colour of the text.
Default:
'black'
The colour of the text.
fontStylestring
The font style to use for the legend.
Default:
'normal'
The font style to use for the legend.
normal
italic
oblique
fontWeightstring
The font weight to use for the legend.
Default:
'normal'
The font weight to use for the legend.
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
fontSizenumber
The font size in pixels to use for the legend.
px
Default:
12
The font size in pixels to use for the legend.
px
fontFamilystring
The font family to use for the legend.
Default:
'Verdana, sans-serif'
The font family to use for the legend.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
navigatorObject❯
Configuration for the chart navigator. This config is only supported by cartesian charts.
Configuration for the chart navigator. This config is only supported by cartesian charts.
enabledboolean
Whether or not to show the navigator.
Default:
false
Whether or not to show the navigator.
false
true
heightnumber
The height of the navigator.
px
Default:
30
The height of the navigator.
px
marginnumber
The distance between the navigator and the bottom axis.
px
Default:
10
The distance between the navigator and the bottom axis.
px
minnumber
The start of the visible range in the
Default:
0
The start of the visible range in the
[0, 1]
interval.maxnumber
The end of the visible range in the
Default:
1
The end of the visible range in the
[0, 1]
interval.maskObject❯
Configuration for the navigator's visible range mask.
Configuration for the navigator's visible range mask.
fillstring
The fill colour used by the mask.
Default:
'#999999'
The fill colour used by the mask.
strokestring
The stroke colour used by the mask.
Default:
'#999999'
The stroke colour used by the mask.
strokeWidthnumber
The stroke width used by the mask.
px
Default:
1
The stroke width used by the mask.
px
fillOpacitynumber
The opacity of the mask's fill in the
Default:
0.2
The opacity of the mask's fill in the
[0, 1]
interval, where 0
is effectively no masking.minHandleObject❯
Configuration for the navigator's left handle.
Configuration for the navigator's left handle.
fillstring
The fill colour used by the handle.
Default:
'#f2f2f2'
The fill colour used by the handle.
strokestring
The stroke colour used by the handle.
Default:
'#999999'
The stroke colour used by the handle.
strokeWidthnumber
The stroke width used by the handle.
px
Default:
1
The stroke width used by the handle.
px
widthnumber
The width of the handle.
px
Default:
8
The width of the handle.
px
heightnumber
The height of the handle.
px
Default:
16
The height of the handle.
px
gripLineLengthnumber
The length of the handle's grip lines.
px
Default:
8
The length of the handle's grip lines.
px
gripLineGapnumber
The distance between the handle's grip lines.
px
Default:
2
The distance between the handle's grip lines.
px
maxHandleObject❯
Configuration for the navigator's right handle.
Configuration for the navigator's right handle.
fillstring
The fill colour used by the handle.
Default:
'#f2f2f2'
The fill colour used by the handle.
strokestring
The stroke colour used by the handle.
Default:
'#999999'
The stroke colour used by the handle.
strokeWidthnumber
The stroke width used by the handle.
px
Default:
1
The stroke width used by the handle.
px
widthnumber
The width of the handle.
px
Default:
8
The width of the handle.
px
heightnumber
The height of the handle.
px
Default:
16
The height of the handle.
px
gripLineLengthnumber
The length of the handle's grip lines.
px
Default:
8
The length of the handle's grip lines.
px
gripLineGapnumber
The distance between the handle's grip lines.
px
Default:
2
The distance between the handle's grip lines.
px
axesObject❯
Configuration for axes in cartesian charts.
Configuration for axes in cartesian charts.
typestring
The type of the axis.
Options:
Default: N/A
The type of the axis.
Options:
'category' | 'number' | 'time'
positionstring
The position on the chart where the axis should be rendered.
Default: N/A
The position on the chart where the axis should be rendered.
top
right
bottom
left
minnumber
User override for the automatically determinted min value (based on series data). Only applied to "number" axes.
Default: N/A
User override for the automatically determinted min value (based on series data). Only applied to "number" axes.
maxnumber
User override for the automatically determinted max value (based on series data). Only applied to "number" axes.
Default: N/A
User override for the automatically determinted max value (based on series data). Only applied to "number" axes.
titleObject❯
Configuration for the title shown next to the axis.
Configuration for the title shown next to the axis.
enabledboolean
Whether or not the axis title should be shown.
Default:
true
Whether or not the axis title should be shown.
false
true
textstring
The text to show in the axis title.
Default:
'Axis Title'
The text to show in the axis title.
colorstring
The colour to use for the axis title.
Default:
'#000000'
The colour to use for the axis title.
fontStylestring
The font style to use for the axis title.
Default:
'normal'
The font style to use for the axis title.
normal
italic
oblique
fontWeightstring
The font weight to use for the axis title.
Default:
'bold'
The font weight to use for the axis title.
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
fontSizenumber
The font size in pixels to use for the axis title.
px
Default:
14
The font size in pixels to use for the axis title.
px
fontFamilystring
The font family to use for the axis title.
Default:
'Verdana, sans-serif'
The font family to use for the axis title.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
lineObject❯
Configuration for the axis line.
Configuration for the axis line.
widthnumber
The width in pixels of the axis line.
px
Default:
1
The width in pixels of the axis line.
px
colorstring
The colour of the axis line.
Default:
'rgba(195, 195, 195, 1)'
The colour of the axis line.
tickObject❯
Configuration for the axis ticks.
Configuration for the axis ticks.
widthnumber
The width in pixels of the axis ticks (and corresponding grid line).
px
Default:
1
The width in pixels of the axis ticks (and corresponding grid line).
px
sizenumber
The length in pixels of the axis ticks.
px
Default:
6
The length in pixels of the axis ticks.
px
colorstring
The colour of the axis ticks.
Default:
'rgba(195, 195, 195, 1)'
The colour of the axis ticks.
countnumber
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
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.
labelObject❯
Configuration for the axis labels, shown next to the ticks.
Configuration for the axis labels, shown next to the ticks.
fontStylestring
The font style to use for the labels.
Default:
'normal'
The font style to use for the labels.
normal
italic
oblique
fontWeightstring
The font weight to use for the labels.
Default:
'normal'
The font weight to use for the labels.
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
fontSizenumber
The font size in pixels to use for the labels.
px
Default:
12
The font size in pixels to use for the labels.
px
fontFamilystring
The font family to use for the labels.
Default:
'Verdana, sans-serif'
The font family to use for the labels.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
colorstring
The colour to use for the labels.
Default:
'#000000'
The colour to use for the labels.
paddingnumber
Padding in pixels between the axis label and the tick.
px
Default:
5
Padding in pixels between the axis label and the tick.
px
rotationnumber
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
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.
°
formatstring
Format string used when rendering labels for time axes. For more information on the structure of the string, click here.
Default: N/A
Format string used when rendering labels for time axes. For more information on the structure of the string, click here.
formatterFunction
Default: N/A
function (params: ParamsType): string;
interface ParamsType {
value: any;
index: number;
fractionDigits: number;
formatter: (x: any) => string;
}
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
.gridStyleObject❯
Configuration of the lines used to form the grid in the chart area.
Configuration of the lines used to form the grid in the chart area.
strokestring
The colour of the grid line.
Default:
'rgba(195, 195, 195, 1)'
The colour of the grid line.
lineDashnumber[]
Defines how the gridlines are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example,
Default:
[4, 2]
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.seriesObject❯
Configuration for bar/column series.
Configuration for bar/column series.
xKeystring
The key to use to retrieve x-values from the data.
Required
The key to use to retrieve x-values from the data.
xNamestring
A human-readable description of the x-values.
Default: N/A
A human-readable description of the x-values.
yKeysstring[]
The keys to use to retrieve y-values from the data.
Required
The keys to use to retrieve y-values from the data.
yNamesstring[]
Human-readable descriptions of the y-values.
Default: N/A
Human-readable descriptions of the y-values.
dataobject[]
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
Required
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
visibleboolean
Whether or not to display the series.
Default:
true
Whether or not to display the series.
false
true
showInLegendboolean
Whether or not to include the series in the legend.
Default:
true
Whether or not to include the series in the legend.
false
true
tooltipObject❯
Series-specific tooltip configuration.
Series-specific tooltip configuration.
enabledboolean
Whether or not to show tooltips when the series are hovered over.
Default:
true
Whether or not to show tooltips when the series are hovered over.
false
true
rendererFunction
Default: N/A
function (params: ParamsType): string;
interface ParamsType {
datum: any;
title?: string;
color?: string;
xKey: string;
xValue: any;
xName?: string;
yKey: string;
yValue: any;
yName?: string;
}
Function used to create the content for tooltips.groupedboolean
Whether to show different y-values as separate bars (grouped) or not (stacked).
Default:
false
Whether to show different y-values as separate bars (grouped) or not (stacked).
false
true
normalizedTonumber
The number to normalise the bar stacks to. Has no effect when
Default: N/A
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.fillsstring[]
The colours to cycle through for the fills of the bars.
Default:
['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888']
The colours to cycle through for the fills of the bars.
fillOpacitynumber
The opacity of the fill for the bars.
Default:
1
The opacity of the fill for the bars.
strokesstring[]
The colours to cycle through for the strokes of the bars.
Default:
['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
The colours to cycle through for the strokes of the bars.
strokeOpacitynumber
The opacity of the stroke for the bars.
Default:
1
The opacity of the stroke for the bars.
strokeWidthnumber
The width in pixels of the stroke for the bars.
px
Default:
1
The width in pixels of the stroke for the bars.
px
highlightStyleObject❯
Configuration for the highlighting used when the bars are hovered over.
Configuration for the highlighting used when the bars are hovered over.
fillstring
The fill colour of the bars when hovered over.
Default:
'yellow'
The fill colour of the bars when hovered over.
strokestring
The colour of the stroke around the bars when hovered over.
Default: N/A
The colour of the stroke around the bars when hovered over.
shadowObject❯
Configuration for the shadow used behind the chart series.
Configuration for the shadow used behind the chart series.
enabledboolean
Whether or not the shadow is visible.
Default:
true
Whether or not the shadow is visible.
false
true
colorstring
The colour of the shadow.
Default:
'rgba(0, 0, 0, 0.5)'
The colour of the shadow.
xOffsetnumber
The horizontal offset in pixels for the shadow.
px
Default:
0
The horizontal offset in pixels for the shadow.
px
yOffsetnumber
The vertical offset in pixels for the shadow.
px
Default:
0
The vertical offset in pixels for the shadow.
px
blurnumber
The radius of the shadow's blur, given in pixels.
px
Default:
5
The radius of the shadow's blur, given in pixels.
px
lineDashnumber[]
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,
Default:
[]
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.lineDashOffsetnumber
The initial offset of the dashed line in pixels.
px
Default:
0
The initial offset of the dashed line in pixels.
px
labelObject❯
Configuration for the labels shown on bars.
Configuration for the labels shown on bars.
enabledboolean
Whether or not the labels should be shown.
Default:
true
Whether or not the labels should be shown.
false
true
colorstring
The colour to use for the labels.
Default:
'rgba(70, 70, 70, 1)'
The colour to use for the labels.
fontStylestring
The font style to use for the labels.
Default:
'normal'
The font style to use for the labels.
normal
italic
oblique
fontWeightstring
The font weight to use for the labels.
Default:
'normal'
The font weight to use for the labels.
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
fontSizenumber
The font size in pixels to use for the labels.
px
Default:
12
The font size in pixels to use for the labels.
px
fontFamilystring
The font family to use for the labels.
Default:
'Verdana, sans-serif'
The font family to use for the labels.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
formatterFunction
Default: N/A
function (params: ParamsType): ReturnType;
interface ParamsType {
datum: any;
fill: string;
stroke: string;
strokeWidth: number;
highlighted: boolean;
xKey: string;
yKey: string;
}
interface ReturnType {
fill: string;
stroke: string;
strokeWidth: number;
}
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.listenersObject❯
A map of event names to event listeners.
A map of event names to event listeners.
nodeClickFunction
Default: N/A
function (params: ParamsType): any;
interface ParamsType {
type: 'nodeClick';
series: BarSeries;
datum: any;
xKey: string;
yKey: string;
}
The listener to call when a bar/column node is clicked.// create new chart
chart = AgChart.create({
series: [
{
type: 'column',
xKey: 'month',
yKeys: ['revenue', 'profit']
}
]
});
// update existing chart
chart.series[0].type = 'column';
chart.series[0].xKey = 'month';
chart.series[0].yKeys = ['revenue', 'profit'];