ag-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.
dataRequired | 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. |
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.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. |
tooltipOffset | Offset of a tooltip from the cursor in pixels, specified as [xOffset, yOffset].Default: [20,
20] |
tooltipClass | A class to be added to tooltips in the chart. |
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. |
padding
Configuration for the padding shown around the chart.
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.
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.
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.
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.
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 |
layoutHorizontalSpacing | The horizontal spacing in pixels to use between legend items. Default: 16 |
layoutVerticalSpacing | The vertical spacing in pixels to use between legend items. Default: 8 |
itemSpacing | The spacing in pixels between a legend marker and the corresponding label. Default: 8 |
markerShape | 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' |
markerSize | 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 |
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' |
Axis Configuration
Configuration for axes in cartesian charts.
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' |
rotation | The rotation of the axis in degrees. |
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.
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.
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.
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.
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. 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.
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.
xKeyRequired | The key to use to retrieve x-values from the data. |
xName | A human-readable description of the x-values. |
yKeysRequired | The keys to use to retrieve y-values from the data. |
yNames | Human-readable descriptions of the y-values. |
dataRequired | 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 |
tooltipEnabled | Whether or not to show tooltips when the series are hovered over. Default: true |
tooltipRenderer | Function used to create the content for tooltips. |
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. |
label | Configuration for the labels shown on bars. See label for more details about this configuration object. |
highlightStyle
Configuration for the highlighting used when the bars are hovered over.
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.
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.
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' |
Line Series Configuration
Configuration for line series.
xKeyRequired | The key to use to retrieve x-values from the data. |
xName | A human-readable description of the x-values. |
yKeyRequired | The key to use to retrieve y-values from the data. |
yName | A human-readable description of the y-values. |
dataRequired | 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 |
tooltipEnabled | Whether or not to show tooltips when the series are hovered over. Default: true |
tooltipRenderer | Function used to create the content for tooltips. |
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. |
marker
Configuration for the markers used in the series.
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 |
minSize | For series where the size of the marker is determined by the data, this determines the smallest size a marker can be in pixels. Default: 12 |
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.
fill | The fill colour of the markers when hovered over. Default: 'yellow' |
stroke | The colour of the stroke around the markers when hovered over. |
Area Series Configuration
Configuration for area series.
xKeyRequired | The key to use to retrieve x-values from the data. |
xName | A human-readable description of the x-values. |
yKeysRequired | The keys to use to retrieve y-values from the data. |
yNames | Human-readable descriptions of the y-values. |
dataRequired | 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 |
tooltipEnabled | Whether or not to show tooltips when the series are hovered over. Default: true |
tooltipRenderer | Function used to create the content for tooltips. |
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. |
shadow | Configuration for the shadow used behind the chart series. See shadow for more details about this configuration object. |
marker
Configuration for the markers used in the series.
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 |
minSize | For series where the size of the marker is determined by the data, this determines the smallest size a marker can be in pixels. Default: 12 |
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.
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.
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.
xKeyRequired | The key to use to retrieve x-values from the data. |
xName | A human-readable description of the x-values. |
yKeyRequired | 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. |
dataRequired | 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 |
tooltipEnabled | Whether or not to show tooltips when the series are hovered over. Default: true |
tooltipRenderer | Function used to create the content for tooltips. |
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. |
marker
Configuration for the markers used in the series.
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 |
minSize | For series where the size of the marker is determined by the data, this determines the smallest size a marker can be in pixels. Default: 12 |
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.
fill | The fill colour of the markers when hovered over. Default: 'yellow' |
stroke | The colour of the stroke around the markers when hovered over. |
Pie/Doughnut Series Configuration
Configuration for pie/doughnut series.
angleKeyRequired | The key to use to retrieve angle values from the data. |
angleName | A human-readable description of the angle values. |
labelKeyRequired | 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. |
dataRequired | 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 |
tooltipEnabled | Whether or not to show tooltips when the series are hovered over. Default: true |
tooltipRenderer | Function used to create the content for tooltips. |
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. |
title
Configuration for the series title.
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.
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.
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 |
callout
Configuration for the callouts used with the labels for the segments.
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.
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 |