JavaScript Charts: API Explorer
The API explorer can be used to gain familiarity with the AG Charts API and see in real-time how different options affect charts. A code snippet showing the use of the API is produced based on the point and click configurations specified in the explorer.
API Explorer
Column
Bar
Line
Scatter
Area
Pie
Histogram
Options
Search:
type'cartesian' | 'groupedCategory' | 'line' | 'bar' | 'column' | 'area' | 'scatter' | 'histogram'
Type of chart to render. Inherited from the first declared series if unspecified.
Default: N/A
Type of chart to render. Inherited from the first declared series if unspecified.
dataany[]
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 | null
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). axes[0]Object❯
X-axis (category).
X-axis (category).
type'category'
Required
paddingInnernumber
The size of the gap between the categories as a proportion, between 0 and 1. This value is a fraction of the “step”, which is the interval between the start of a band and the start of the next band.
Default:
Default: N/A
The size of the gap between the categories as a proportion, between 0 and 1. This value is a fraction of the “step”, which is the interval between the start of a band and the start of the next band.
Default:
0.2
paddingOuternumber
The padding on the outside i.e. left and right of the first and last category. In association with
Default:
Default: N/A
The padding on the outside i.e. left and right of the first and last category. In association with
paddingInner, this value can be between 0 and 1.Default:
0.3
groupPaddingInnernumber
This property is for grouped column/bar series plotted on a category axis. It is a proportion between 0 and 1 which determines the size of the gap between the bars or columns within a single group along the axis.
Default:
Default: N/A
This property is for grouped column/bar series plotted on a category axis. It is a proportion between 0 and 1 which determines the size of the gap between the bars or columns within a single group along the axis.
Default:
0.2
tickObject❯
Configuration for the axis ticks.
Configuration for 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: N/A
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.
widthnumber
The width in pixels of the axis ticks (and corresponding grid line).
px
Default:
1The width in pixels of the axis ticks (and corresponding grid line).
px
sizenumber
The length in pixels of the axis ticks.
px
Default:
6The 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.
position'top' | 'bottom'
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
bottom
titleObject❯
Configuration for the title shown next to the axis.
Configuration for the title shown next to the axis.
enabledboolean
Whether or not the title should be shown.
Default: N/A
Whether or not the title should be shown.
false
true
textstring
The text to show in the title.
Default: N/A
The text to show in the title.
fontStyle'normal' | 'italic' | 'oblique'
The font style to use for the title.
Default: N/A
The font style to use for the title.
normal
italic
oblique
fontWeight'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
The font weight to use for the title.
Default: N/A
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: N/A
The font size in pixels to use for the title.
px
fontFamilystring
The font family to use for the title.
Default: N/A
The font family to use for the title.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
colorstring
The colour to use for the title.
Default: N/A
The colour to use for the title.
lineObject❯
Configuration for the axis line.
Configuration for the axis line.
widthnumber
The width in pixels of the axis line.
px
Default:
1The 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.
labelObject❯
Configuration for the axis labels, shown next to the ticks.
Configuration for the axis labels, shown next to the ticks.
fontStyle'normal' | 'italic' | 'oblique'
The font style to use for the labels.
Default:
'normal'The font style to use for the labels.
normal
italic
oblique
fontWeight'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
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:
12The 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
paddingnumber
Padding in pixels between the axis label and the tick.
px
Default:
5Padding in pixels between the axis label and the tick.
px
colorstring
The colour to use for the labels
Default:
'#000000'The colour to use for the labels
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:
0The 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.
°
autoRotateboolean
If specified and axis labels may collide, they are rotated so that they are positioned at the supplied angle. This is enabled by default for category. If the
Default:
falseIf specified and axis labels may collide, they are rotated so that they are positioned at the supplied angle. This is enabled by default for category. If the
rotation property is specified, it takes precedence. false
true
autoRotateAnglenumber
If autoRotate is enabled, specifies the rotation angle to use when autoRotate is activated. Defaults to an angle of 335 degrees if unspecified.
°
Default:
335If autoRotate is enabled, specifies the rotation angle to use when autoRotate is activated. Defaults to an angle of 335 degrees if unspecified.
°
avoidCollisionsboolean
Avoid axis label collision by automatically reducing the number of ticks displayed. If set to
Default: N/A
Avoid axis label collision by automatically reducing the number of ticks displayed. If set to
false, axis labels may collide. false
true
minSpacingnumber
Minimum gap in pixels between the axis labels before being removed to avoid collisions.
px
Default: N/A
Minimum gap in pixels between the axis labels before being removed to avoid collisions.
px
formatstring
Format string used when rendering labels for time axes.
Default: N/A
Format string used when rendering labels for time axes.
formatterFunction
Default: N/A
function (params: AgAxisLabelFormatterParams) => string | undefined;
interface AgAxisLabelFormatterParams {
value: any;
index: number;
fractionDigits: number;
formatter: (x: any) => string;
}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.
lineDashPixelSize[]
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. crossLinesObject❯
Add cross lines or regions corresponding to data values.
Add cross lines or regions corresponding to data values.
enabledboolean
Whether or not to show the cross line.
Default: N/A
Whether or not to show the cross line.
false
true
type'line' | 'range'
Type of cross line to render.
Required
Type of cross line to render.
line
range
valueany
The data value at which the line should be positioned. This property is used if the crossLine type is
Default: N/A
The data value at which the line should be positioned. This property is used if the crossLine type is
line. range[DataValue, DataValue]
The range of values from the data used to display lines at a desired chart region. This property is only used for crossLine type
Default: N/A
The range of values from the data used to display lines at a desired chart region. This property is only used for crossLine type
range. fillstring
The colour to use for the fill of the range.
Default: N/A
The colour to use for the fill of the range.
fillOpacitynumber
The opacity of the fill for the range.
Default: N/A
The opacity of the fill for the range.
strokestring
The colour of the stroke for the lines.
Default: N/A
The colour of the stroke for the lines.
strokeWidthnumber
The width in pixels of the stroke for the lines.
px
Default: N/A
The width in pixels of the stroke for the lines.
px
strokeOpacitynumber
The opacity of the stroke for the lines.
Default: N/A
The opacity of the stroke for the lines.
lineDashPixelSize[]
Defines how the line stroke is rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example,
Default: N/A
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. labelObject❯
Configuration for the crossLine label.
Configuration for the crossLine label.
enabledboolean
Whether or not to show the cross line label.
Default: N/A
Whether or not to show the cross line label.
false
true
textstring
The text to show in the label.
Default: N/A
The text to show in the label.
fontStyle'normal' | 'italic' | 'oblique'
The font style to use for the label.
Default: N/A
The font style to use for the label.
normal
italic
oblique
fontWeight'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
The font weight to use for the label.
Default: N/A
The font weight to use for the label.
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
fontSizenumber
The font size in pixels to use for the label.
px
Default: N/A
The font size in pixels to use for the label.
px
fontFamilystring
The font family to use for the label.
Default: N/A
The font family to use for the label.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
paddingnumber
Padding in pixels between the label and the edge of the crossLine.
px
Default: N/A
Padding in pixels between the label and the edge of the crossLine.
px
colorstring
The colour to use for the label.
Default: N/A
The colour to use for the label.
position'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'inside' | 'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom' | 'insideTopLeft' | 'insideBottomLeft' | 'insideTopRight' | 'insideBottomRight'
The position of the crossLine label.
Default: N/A
The position of the crossLine label.
rotationnumber
The rotation of the crossLine label in degrees.
Default: N/A
The rotation of the crossLine label in degrees.
keysstring[]
Default: N/A
thicknessnumber
If set to a non-zero value, the axis will have the specified thickness regardless of label size.
px
Default: N/A
If set to a non-zero value, the axis will have the specified thickness regardless of label size.
px
axes[1]Object❯
Y-axis (numeric).
Y-axis (numeric).
type'number'
Required
niceboolean
If 'true', the range will be rounded up to ensure nice equal spacing between the ticks.
Default:
trueIf 'true', the range will be rounded up to ensure nice equal spacing between the ticks.
false
true
minnumber
User override for the automatically determined min value (based on series data).
Default: N/A
User override for the automatically determined min value (based on series data).
maxnumber
User override for the automatically determined max value (based on series data).
Default: N/A
User override for the automatically determined max value (based on series data).
tickObject❯
Configuration for the axis ticks.
Configuration for 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: N/A
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.
widthnumber
The width in pixels of the axis ticks (and corresponding grid line).
px
Default:
1The width in pixels of the axis ticks (and corresponding grid line).
px
sizenumber
The length in pixels of the axis ticks.
px
Default:
6The 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.
position'left' | 'right'
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.
left
right
titleObject❯
Configuration for the title shown next to the axis.
Configuration for the title shown next to the axis.
enabledboolean
Whether or not the title should be shown.
Default: N/A
Whether or not the title should be shown.
false
true
textstring
The text to show in the title.
Default: N/A
The text to show in the title.
fontStyle'normal' | 'italic' | 'oblique'
The font style to use for the title.
Default: N/A
The font style to use for the title.
normal
italic
oblique
fontWeight'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
The font weight to use for the title.
Default: N/A
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: N/A
The font size in pixels to use for the title.
px
fontFamilystring
The font family to use for the title.
Default: N/A
The font family to use for the title.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
colorstring
The colour to use for the title.
Default: N/A
The colour to use for the title.
lineObject❯
Configuration for the axis line.
Configuration for the axis line.
widthnumber
The width in pixels of the axis line.
px
Default:
1The 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.
labelObject❯
Configuration for the axis labels, shown next to the ticks.
Configuration for the axis labels, shown next to the ticks.
fontStyle'normal' | 'italic' | 'oblique'
The font style to use for the labels.
Default:
'normal'The font style to use for the labels.
normal
italic
oblique
fontWeight'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
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:
12The 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
paddingnumber
Padding in pixels between the axis label and the tick.
px
Default:
5Padding in pixels between the axis label and the tick.
px
colorstring
The colour to use for the labels
Default:
'#000000'The colour to use for the labels
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:
0The 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.
°
autoRotateboolean
If specified and axis labels may collide, they are rotated so that they are positioned at the supplied angle. This is enabled by default for category. If the
Default:
falseIf specified and axis labels may collide, they are rotated so that they are positioned at the supplied angle. This is enabled by default for category. If the
rotation property is specified, it takes precedence. false
true
autoRotateAnglenumber
If autoRotate is enabled, specifies the rotation angle to use when autoRotate is activated. Defaults to an angle of 335 degrees if unspecified.
°
Default:
335If autoRotate is enabled, specifies the rotation angle to use when autoRotate is activated. Defaults to an angle of 335 degrees if unspecified.
°
avoidCollisionsboolean
Avoid axis label collision by automatically reducing the number of ticks displayed. If set to
Default: N/A
Avoid axis label collision by automatically reducing the number of ticks displayed. If set to
false, axis labels may collide. false
true
minSpacingnumber
Minimum gap in pixels between the axis labels before being removed to avoid collisions.
px
Default: N/A
Minimum gap in pixels between the axis labels before being removed to avoid collisions.
px
formatstring
Format string used when rendering labels for time axes.
Default: N/A
Format string used when rendering labels for time axes.
formatterFunction
Default: N/A
function (params: AgAxisLabelFormatterParams) => string | undefined;
interface AgAxisLabelFormatterParams {
value: any;
index: number;
fractionDigits: number;
formatter: (x: any) => string;
}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.
lineDashPixelSize[]
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. crossLinesObject❯
Add cross lines or regions corresponding to data values.
Add cross lines or regions corresponding to data values.
enabledboolean
Whether or not to show the cross line.
Default: N/A
Whether or not to show the cross line.
false
true
type'line' | 'range'
Type of cross line to render.
Required
Type of cross line to render.
line
range
valueany
The data value at which the line should be positioned. This property is used if the crossLine type is
Default: N/A
The data value at which the line should be positioned. This property is used if the crossLine type is
line. range[DataValue, DataValue]
The range of values from the data used to display lines at a desired chart region. This property is only used for crossLine type
Default: N/A
The range of values from the data used to display lines at a desired chart region. This property is only used for crossLine type
range. fillstring
The colour to use for the fill of the range.
Default: N/A
The colour to use for the fill of the range.
fillOpacitynumber
The opacity of the fill for the range.
Default: N/A
The opacity of the fill for the range.
strokestring
The colour of the stroke for the lines.
Default: N/A
The colour of the stroke for the lines.
strokeWidthnumber
The width in pixels of the stroke for the lines.
px
Default: N/A
The width in pixels of the stroke for the lines.
px
strokeOpacitynumber
The opacity of the stroke for the lines.
Default: N/A
The opacity of the stroke for the lines.
lineDashPixelSize[]
Defines how the line stroke is rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example,
Default: N/A
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. labelObject❯
Configuration for the crossLine label.
Configuration for the crossLine label.
enabledboolean
Whether or not to show the cross line label.
Default: N/A
Whether or not to show the cross line label.
false
true
textstring
The text to show in the label.
Default: N/A
The text to show in the label.
fontStyle'normal' | 'italic' | 'oblique'
The font style to use for the label.
Default: N/A
The font style to use for the label.
normal
italic
oblique
fontWeight'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
The font weight to use for the label.
Default: N/A
The font weight to use for the label.
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
fontSizenumber
The font size in pixels to use for the label.
px
Default: N/A
The font size in pixels to use for the label.
px
fontFamilystring
The font family to use for the label.
Default: N/A
The font family to use for the label.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
paddingnumber
Padding in pixels between the label and the edge of the crossLine.
px
Default: N/A
Padding in pixels between the label and the edge of the crossLine.
px
colorstring
The colour to use for the label.
Default: N/A
The colour to use for the label.
position'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'inside' | 'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom' | 'insideTopLeft' | 'insideBottomLeft' | 'insideTopRight' | 'insideBottomRight'
The position of the crossLine label.
Default: N/A
The position of the crossLine label.
rotationnumber
The rotation of the crossLine label in degrees.
Default: N/A
The rotation of the crossLine label in degrees.
keysstring[]
Default: N/A
thicknessnumber
If set to a non-zero value, the axis will have the specified thickness regardless of label size.
px
Default: N/A
If set to a non-zero value, the axis will have the specified thickness regardless of label size.
px
seriesObject❯
Series configurations.
Series configurations.
type'bar' | 'column'
Default: N/A
bar
column
groupedboolean
Whether to show different y-values as separate bars (grouped) or not (stacked).
Default:
falseWhether to show different y-values as separate bars (grouped) or not (stacked).
false
true
stackedboolean
Default: N/A
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. xKeystring
The key to use to retrieve x-values from the data.
Required
The key to use to retrieve x-values from the data.
yKeystring
The keys to use to retrieve y-values from the data.
Required
The keys to use to retrieve y-values from the data.
xNamestring
A human-readable description of the x-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
Default: N/A
A human-readable description of the x-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
yNamestring
Human-readable description of the y-values. If supplied, a corresponding
Default: N/A
Human-readable description of the y-values. If supplied, a corresponding
yName will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. flipXYboolean
Default: N/A
false
true
fillstring
The colour to use for the fill of the area.
Default: N/A
The colour to use for the fill of the area.
strokestring
The colours to use for the stroke of the bars.
Default: N/A
The colours to use for the stroke of the bars.
strokeWidthnumber
The width in pixels of the stroke for the bars.
px
Default:
1The width in pixels of the stroke for the bars.
px
fillOpacitynumber
The opacity of the fill for the bars.
Default:
1The opacity of the fill for the bars.
strokeOpacitynumber
The opacity of the stroke for the bars.
Default:
1The opacity of the stroke for the bars.
lineDashPixelSize[]
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: N/A
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:
0The initial offset of the dashed line in pixels.
px
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: N/A
Whether or not the shadow is visible.
false
true
colorstring
The colour of the shadow.
Default: N/A
The colour of the shadow.
xOffsetnumber
The horizontal offset in pixels for the shadow.
px
Default: N/A
The horizontal offset in pixels for the shadow.
px
yOffsetnumber
The vertical offset in pixels for the shadow.
px
Default: N/A
The vertical offset in pixels for the shadow.
px
blurnumber
The radius of the shadow's blur, given in pixels.
px
Default: N/A
The radius of the shadow's blur, given in pixels.
px
labelObject❯
Configuration for the labels shown on bars.
Configuration for the labels shown on bars.
placement'inside' | 'outside'
Where to render series labels relative to the segments.
Default: N/A
Where to render series labels relative to the segments.
inside
outside
formatterFunction
Default: N/A
function (params: AgCartesianSeriesLabelFormatterParams) => string;
interface AgCartesianSeriesLabelFormatterParams {
seriesId: string;
value: number;
}enabledboolean
Whether or not the labels should be shown.
Default: N/A
Whether or not the labels should be shown.
false
true
fontStyle'normal' | 'italic' | 'oblique'
The font style to use for the labels.
Default: N/A
The font style to use for the labels.
normal
italic
oblique
fontWeight'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
The font weight to use for the labels.
Default: N/A
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: N/A
The font size in pixels to use for the labels.
px
fontFamilystring
The font family to use for the labels.
Default: N/A
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: N/A
The colour to use for the labels.
tooltipObject❯
Series-specific tooltip configuration.
Series-specific tooltip configuration.
rendererFunction
Default: N/A
function (params: AgCartesianSeriesTooltipRendererParams) => string | AgTooltipRendererResult;
interface AgCartesianSeriesTooltipRendererParams {
xKey: string;
xValue: any;
xName: string;
yKey: string;
yValue: any;
yName: string;
datum: any;
title: string;
color: string;
seriesId: string;
}enabledboolean
Whether or not to show tooltips when the series are hovered over.
Default: N/A
Whether or not to show tooltips when the series are hovered over.
false
true
formatterFunction
Default: N/A
function (params: AgBarSeriesFormatterParams<DatumType>) => AgBarSeriesFormat;
interface AgBarSeriesFormat {
fill: string;
stroke: string;
strokeWidth: number;
}
interface AgBarSeriesFormatterParams<DatumType> {
datum: DatumType;
fill: string;
stroke: string;
strokeWidth: number;
highlighted: boolean;
xKey: string;
yKey: string;
seriesId: string;
}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
Required
function (params: AgSeriesNodeClickParams<DatumType>) => void;
interface AgSeriesNodeClickParams<DatumType> {
type: 'nodeClick';
seriesId: string;
datum: DatumType;
xKey: string;
yKey: string;
sizeKey: string;
labelKey: string;
colorKey: string;
angleKey: string;
calloutLabelKey: string;
sectorLabelKey: string;
radiusKey: string;
}idstring
Primary identifier for the series. This is provided as
Default: auto-generated value
Default: N/A
Primary identifier for the series. This is provided as
seriesId in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique id value. Default: auto-generated value
dataDatumType[]
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
Default: N/A
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: N/A
Whether or not to display the series.
false
true
showInLegendboolean
Whether or not to include the series in the legend.
Default: N/A
Whether or not to include the series in the legend.
false
true
cursorstring
The cursor to use for hovered area markers. This config is identical to the CSS
Default: N/A
The cursor to use for hovered area markers. This config is identical to the CSS
cursor property. highlightStyleObject❯
Configuration for series markers and series line highlighting when a marker / data point or a legend item is hovered over.
Configuration for series markers and series line highlighting when a marker / data point or a legend item is hovered over.
itemObject❯
Highlight style used for an individual marker when tapped or hovered over.
Highlight style used for an individual marker when tapped or hovered over.
fillstring
The fill colour of a marker when tapped or hovered over. Use
Default: N/A
The fill colour of a marker when tapped or hovered over. Use
undefined for no highlight. fillOpacitynumber
The opacity of the fill for the highlighted item.
Default: N/A
The opacity of the fill for the highlighted item.
strokestring
The stroke colour of a marker when tapped or hovered over. Use
Default: N/A
The stroke colour of a marker when tapped or hovered over. Use
undefined for no highlight. strokeWidthnumber
The stroke width of a marker when tapped or hovered over. Use
px
Default: N/A
The stroke width of a marker when tapped or hovered over. Use
undefined for no highlight. px
seriesObject❯
Highlight style used for whole series when one of its markers is tapped or hovered over.
Highlight style used for whole series when one of its markers is tapped or hovered over.
enabledboolean
Default: N/A
false
true
dimOpacitynumber
The opacity of the whole series (area line, area fill, labels and markers, if any) when another chart series or another stack level in the same area series is highlighted by hovering a data point or a legend item. Use
Default: N/A
The opacity of the whole series (area line, area fill, labels and markers, if any) when another chart series or another stack level in the same area series is highlighted by hovering a data point or a legend item. Use
undefined or 1 for no dimming. strokeWidthnumber
The stroke width of the area line when one of the markers is tapped or hovered over, or when a tooltip is shown for a data point, even when series markers are disabled. Use
px
Default: N/A
The stroke width of the area line when one of the markers is tapped or hovered over, or when a tooltip is shown for a data point, even when series markers are disabled. Use
undefined for no highlight. px
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
autoSizeboolean
By default, the chart will resize automatically to fill the container element. Set this to
Important: if this config is set to
Default:
trueBy 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
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.
px
Default:
20The number of pixels of padding at the top of the chart area.
px
rightnumber
The number of pixels of padding at the right of the chart area.
px
Default:
20The number of pixels of padding at the right of the chart area.
px
bottomnumber
The number of pixels of padding at the bottom of the chart area.
px
Default:
20The number of pixels of padding at the bottom of the chart area.
px
leftnumber
The number of pixels of padding at the left of the chart area.
px
Default:
20The number of pixels of padding at the left of the chart area.
px
backgroundObject❯
Configuration for the background shown behind the chart.
Configuration for the background shown behind the chart.
visibleboolean
Whether or not the background should be visible.
Default:
trueWhether or not the background should be visible.
false
true
fillstring
Colour of the chart background.
Default:
'#FFFFFF'Colour of the chart background.
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:
trueWhether 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.
fontStyle'normal' | 'italic' | 'oblique'
The font style to use for the title.
Default:
'normal'The font style to use for the title.
normal
italic
oblique
fontWeight'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
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:
18The 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
colorstring
The colour to use for the title.
Default:
'#000000'The colour to use for the title.
spacingnumber
Spacing added to help position the caption.
Default: 20
Default: N/A
Spacing added to help position the caption.
Default: 20
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 title should be shown.
Default:
trueWhether 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.
fontStyle'normal' | 'italic' | 'oblique'
The font style to use for the title.
Default:
'normal'The font style to use for the title.
normal
italic
oblique
fontWeight'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
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:
18The 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
colorstring
The colour to use for the title.
Default:
'#000000'The colour to use for the title.
spacingnumber
Spacing added to help position the caption.
Default: 20
Default: N/A
Spacing added to help position the caption.
Default: 20
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:
trueSet to false to disable tooltips for all series in the chart.
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.
trackingboolean
If true, for series with markers the tooltip will be shown to the closest marker.
Default:
trueIf true, for series with markers the tooltip will be shown to the closest marker.
false
true
delaynumber
The time interval (in milliseconds) after which the tooltip is shown.
ms
Default:
0The time interval (in milliseconds) after which the tooltip is shown.
ms
legendObject❯
Configuration for the chart legend.
Configuration for the chart legend.
enabledboolean
Whether or not to show the legend.
Default:
trueWhether or not to show the legend.
false
true
position'top' | 'right' | 'bottom' | 'left'
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
orientation'horizontal' | 'vertical'
How the legend items should be arranged.
Default: N/A
How the legend items should be arranged.
horizontal
vertical
maxWidthnumber
Used to constrain the width of the legend.
px
Default: N/A
Used to constrain the width of the legend.
px
maxHeightnumber
Used to constrain the height of the legend.
px
Default: N/A
Used to constrain the height of the legend.
px
spacingnumber
The spacing in pixels to use outside the legend.
px
Default:
20The spacing in pixels to use outside the legend.
px
itemObject❯
Configuration for the legend items that consist of a marker and a label.
Configuration for the legend items that consist of a marker and a label.
markerObject❯
Configuration for the legend markers.
Configuration for the legend markers.
sizenumber
The size in pixels of the markers in the legend.
px
Default:
15The size in pixels of the markers in the legend.
px
shape'circle' | 'cross' | 'diamond' | 'heart' | 'plus' | 'triangle' | any
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:
'square'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
heart
plus
triangle
paddingnumber
The padding in pixels between a legend marker and the corresponding label.
px
Default:
8The padding in pixels between a legend marker and the corresponding label.
px
strokeWidthnumber
The width in pixels of the stroke for markers in the legend.
px
Default:
1The width in pixels of the stroke for markers in the legend.
px
labelObject❯
Configuration for the legend labels.
Configuration for the legend labels.
maxLengthnumber
If the label text exceeds the maximum length, it will be truncated and an ellipsis will be appended to indicate this.
Default: N/A
If the label text exceeds the maximum length, it will be truncated and an ellipsis will be appended to indicate this.
colorstring
The colour of the text.
Default:
'black'The colour of the text.
fontStyle'normal' | 'italic' | 'oblique'
The font style to use for the legend.
Default:
'normal'The font style to use for the legend.
normal
italic
oblique
fontWeight'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
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:
12The 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
formatterFunction
Default: N/A
function (params: AgChartLegendLabelFormatterParams) => string;
interface AgChartLegendLabelFormatterParams {
seriesId: string;
itemId: any;
value: string;
}id is a series ID, itemId is component ID within a series, such as a field name or an item index. maxWidthnumber
Used to constrain the width of legend items.
px
Default: N/A
Used to constrain the width of legend items.
px
paddingXnumber
The horizontal spacing in pixels to use between legend items.
px
Default:
16The horizontal spacing in pixels to use between legend items.
px
paddingYnumber
The vertical spacing in pixels to use between legend items.
px
Default:
8The vertical spacing in pixels to use between legend items.
px
toggleSeriesVisibleboolean
Set to
Default: N/A
Set to
false to turn off toggling of the series visibility in the chart when the legend item is clicked. false
true
reverseOrderboolean
Reverse the display order of legend items if
Default: N/A
Reverse the display order of legend items if
true. false
true
listenersObject❯
Optional callbacks for specific legend-related events.
Optional callbacks for specific legend-related events.
legendItemClickFunction
Default: N/A
function (event: AgChartLegendClickEvent) => void;
interface AgChartLegendClickEvent {
seriesId: string;
itemId: string;
enabled: boolean;
}paginationObject❯
markerObject❯
Configuration for the pagination markers.
Configuration for the pagination markers.
sizenumber
The size in pixels of the pagination buttons.
px
Default: N/A
The size in pixels of the pagination buttons.
px
shape'circle' | 'cross' | 'diamond' | 'heart' | 'plus' | 'triangle' | any
If set, overrides the marker shape for the pagination buttons. If not set, the pagination buttons will default to the
Default: N/A
If set, overrides the marker shape for the pagination buttons. If not set, the pagination buttons will default to the
'triangle' marker shape. circle
cross
diamond
heart
plus
triangle
paddingnumber
The inner padding in pixels between a pagination button and the pagination label.
px
Default: N/A
The inner padding in pixels between a pagination button and the pagination label.
px
activeStyleObject❯
Configuration for pagination buttons when a button is active.
Configuration for pagination buttons when a button is active.
fillstring
The fill colour to use for the pagination button markers.
Default: N/A
The fill colour to use for the pagination button markers.
fillOpacitynumber
Opacity of the pagination buttons.
Default: N/A
Opacity of the pagination buttons.
strokestring
The colour to use for the button strokes.
Default: N/A
The colour to use for the button strokes.
strokeWidthnumber
The width in pixels of the button strokes.
px
Default: N/A
The width in pixels of the button strokes.
px
strokeOpacitynumber
Opacity of the button strokes.
Default: N/A
Opacity of the button strokes.
inactiveStyleObject❯
Configuration for pagination buttons when a button is inactive.
Configuration for pagination buttons when a button is inactive.
fillstring
The fill colour to use for the pagination button markers.
Default: N/A
The fill colour to use for the pagination button markers.
fillOpacitynumber
Opacity of the pagination buttons.
Default: N/A
Opacity of the pagination buttons.
strokestring
The colour to use for the button strokes.
Default: N/A
The colour to use for the button strokes.
strokeWidthnumber
The width in pixels of the button strokes.
px
Default: N/A
The width in pixels of the button strokes.
px
strokeOpacitynumber
Opacity of the button strokes.
Default: N/A
Opacity of the button strokes.
highlightStyleObject❯
Configuration for pagination buttons when a button is hovered over.
Configuration for pagination buttons when a button is hovered over.
fillstring
The fill colour to use for the pagination button markers.
Default: N/A
The fill colour to use for the pagination button markers.
fillOpacitynumber
Opacity of the pagination buttons.
Default: N/A
Opacity of the pagination buttons.
strokestring
The colour to use for the button strokes.
Default: N/A
The colour to use for the button strokes.
strokeWidthnumber
The width in pixels of the button strokes.
px
Default: N/A
The width in pixels of the button strokes.
px
strokeOpacitynumber
Opacity of the button strokes.
Default: N/A
Opacity of the button strokes.
labelObject❯
Configuration for the pagination label.
Configuration for the pagination label.
colorstring
The colour of the text.
Default: N/A
The colour of the text.
fontStyle'normal' | 'italic' | 'oblique'
The font style to use for the pagination label.
Default: N/A
The font style to use for the pagination label.
normal
italic
oblique
fontWeight'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
The font weight to use for the pagination label.
Default: N/A
The font weight to use for the pagination label.
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
fontSizenumber
The font size in pixels to use for the pagination label.
px
Default: N/A
The font size in pixels to use for the pagination label.
px
fontFamilystring
The font family to use for the pagination label.
Default: N/A
The font family to use for the pagination label.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
listenersObject❯
A map of event names to event listeners.
A map of event names to event listeners.
seriesNodeClickFunction
Default: N/A
function (event: AgNodeClickEvent) => any;
interface AgNodeClickEvent {
type: 'seriesNodeClick';
seriesId: string;
datum: any;
xKey: string;
yKey: string;
sizeKey: string;
labelKey: string;
colorKey: string;
angleKey: string;
calloutLabelKey: string;
sectorLabelKey: string;
radiusKey: string;
event: Event;
}seriesNodeClick event can be used to listen to nodeClick events of all the series at once. clickFunction
Default: N/A
function (event: AgChartClickEvent) => any;
interface AgChartClickEvent {
type: T;
event: Event;
}navigatorObject❯
Configuration for the chart navigator.
Configuration for the chart navigator.
enabledboolean
Whether or not to show the navigator.
Default:
falseWhether or not to show the navigator.
false
true
heightnumber
The height of the navigator.
px
Default:
30The height of the navigator.
px
marginnumber
The distance between the navigator and the bottom axis.
px
Default:
10The distance between the navigator and the bottom axis.
px
minnumber
The start of the visible range in the
Default:
0The start of the visible range in the
[0, 1] interval. maxnumber
The end of the visible range in the
Default:
1The 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:
1The stroke width used by the mask.
px
fillOpacitynumber
The opacity of the mask's fill in the
Default:
0.2The 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:
1The stroke width used by the handle.
px
widthnumber
The width of the handle.
px
Default:
8The width of the handle.
px
heightnumber
The height of the handle.
px
Default:
16The height of the handle.
px
gripLineGapnumber
The distance between the handle's grip lines.
px
Default:
2The distance between the handle's grip lines.
px
gripLineLengthnumber
The length of the handle's grip lines.
px
Default:
8The length of 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:
1The stroke width used by the handle.
px
widthnumber
The width of the handle.
px
Default:
8The width of the handle.
px
heightnumber
The height of the handle.
px
Default:
16The height of the handle.
px
gripLineGapnumber
The distance between the handle's grip lines.
px
Default:
2The distance between the handle's grip lines.
px
gripLineLengthnumber
The length of the handle's grip lines.
px
Default:
8The length of the handle's grip lines.
px
themestring | AgChartTheme
Theme to use for rendering of the chart. Specify an inbuilt theme name, or provide an
Default:
'ag-default'Theme to use for rendering of the chart. Specify an inbuilt theme name, or provide an
AgChartTheme instance to customise. ag-default
ag-material
ag-pastel
ag-solar
ag-vivid
ag-default-dark
ag-material-dark
ag-pastel-dark
ag-solar-dark
ag-vivid-dark
// Create new chart
chart = AgChart.create({
series: [
{
type: 'column',
xKey: 'month',
yKey: 'revenue',
stacked: true
},
{
type: 'column',
xKey: 'month',
yKey: 'profit',
stacked: true
}
]
});// Update existing chart
AgChart.update(chart, {
series: [
{
type: 'column',
xKey: 'month',
yKey: 'revenue',
stacked: true
},
{
type: 'column',
xKey: 'month',
yKey: 'profit',
stacked: true
}
]
});