React ChartsAPI 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.
Options
type
- Type
'line' | 'bar' | 'column' | 'area' | 'scatter' | 'histogram' | TAddonType
data
- Type
any[]
- Required
true
container
- Type
HTMLElement | null
Important: make sure to read the
autoSize
config description for information on how the container element affects the chart size (by default). axes[0]
Type
Object
axes[0].type
- Type
'category'
- Required
true
axes[0].paddingInner
- Type
number
0.2
axes[0].paddingOuter
- Type
number
paddingInner
, this value can be between 0 and 1. Default: 0.3
axes[0].groupPaddingInner
- Type
number
0.2
axes[0].tick
Type
Object
axes[0].tick.enabled
- Type
boolean
axes[0].tick.width
- Type
number
axes[0].tick.size
- Type
number
axes[0].tick.color
- Type
string
axes[0].tick.values
- Type
any[]
axes[0].tick.minSpacing
- Type
number
axes[0].position
- Type
'top' | 'bottom'
axes[0].crossLines
Type
Object
axes[0].crossLines.enabled
- Type
boolean
axes[0].crossLines.type
- Type
'line' | 'range'
- Required
true
axes[0].crossLines.value
- Type
any
line
. axes[0].crossLines.range
- Type
[DataValue, DataValue]
range
. axes[0].crossLines.fill
- Type
string
axes[0].crossLines.fillOpacity
- Type
number
axes[0].crossLines.stroke
- Type
string
axes[0].crossLines.strokeWidth
- Type
number
axes[0].crossLines.strokeOpacity
- Type
number
axes[0].crossLines.lineDash
- Type
PixelSize[]
[6, 3]
means dashes with a length of 6
pixels with gaps between of 3
pixels. axes[0].crossLines.label
Type
Object
axes[0].crossLines.label.enabled
- Type
boolean
axes[0].crossLines.label.text
- Type
string
axes[0].crossLines.label.fontStyle
- Type
'normal' | 'italic' | 'oblique'
axes[0].crossLines.label.fontWeight
- Type
'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
axes[0].crossLines.label.fontSize
- Type
number
axes[0].crossLines.label.fontFamily
- Type
string
axes[0].crossLines.label.padding
- Type
number
axes[0].crossLines.label.color
- Type
string
axes[0].crossLines.label.position
- Type
'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'inside' | 'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom' | 'insideTopLeft' | 'insideBottomLeft' | 'insideTopRight' | 'insideBottomRight'
axes[0].crossLines.label.rotation
- Type
number
axes[0].thickness
- Type
number
axes[0].title
Type
Object
axes[0].title.enabled
- Type
boolean
axes[0].title.text
- Type
string
axes[0].title.fontStyle
- Type
'normal' | 'italic' | 'oblique'
axes[0].title.fontWeight
- Type
'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
axes[0].title.fontSize
- Type
number
axes[0].title.fontFamily
- Type
string
axes[0].title.color
- Type
string
axes[0].title.formatter
- Type
Function
function (params: AgAxisCaptionFormatterParams) => string;
interface AgAxisBoundSeries {
key: string;
name: string;
}
interface AgAxisCaptionFormatterParams {
defaultValue: string;
direction: 'x' | 'y';
boundSeries: AgAxisBoundSeries[];
}
Formatter to allow dynamic axis title calculation. axes[0].keys
- Type
string[]
axes[0].line
Type
Object
axes[0].line.width
- Type
number
- Default
1
axes[0].line.color
- Type
string
- Default
'rgba(195, 195, 195, 1)'
axes[0].label
Type
Object
axes[0].label.enabled
- Type
boolean
axes[0].label.fontStyle
- Type
'normal' | 'italic' | 'oblique'
- Default
'normal'
axes[0].label.fontWeight
- Type
'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
- Default
'normal'
axes[0].label.fontSize
- Type
number
- Default
12
axes[0].label.fontFamily
- Type
string
- Default
'Verdana, sans-serif'
axes[0].label.padding
- Type
number
- Default
5
axes[0].label.color
- Type
string
- Default
'#000000'
axes[0].label.rotation
- Type
number
- Default
0
axes[0].label.autoRotate
- Type
boolean
- Default
false
rotation
property is specified, it takes precedence. axes[0].label.autoRotateAngle
- Type
number
- Default
335
axes[0].label.avoidCollisions
- Type
boolean
false
, axis labels may collide. axes[0].label.minSpacing
- Type
number
axes[0].label.format
- Type
string
axes[0].label.formatter
- Type
Function
function (params: AgAxisLabelFormatterParams) => string | undefined;
interface AgAxisLabelFormatterParams {
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
axes[0].gridStyle
Type
Object
axes[0].gridStyle.stroke
- Type
string
- Default
'rgba(195, 195, 195, 1)'
axes[0].gridStyle.lineDash
- Type
PixelSize[]
- Default
[4, 2]
[6, 3]
means dashes with a length of 6
pixels with gaps between of 3
pixels. axes[1]
Type
Object
axes[1].type
- Type
'number'
- Required
true
axes[1].nice
- Type
boolean
- Default
true
axes[1].min
- Type
number
axes[1].max
- Type
number
axes[1].tick
Type
Object
axes[1].tick.maxSpacing
- Type
number
axes[1].tick.interval
- Type
number
axes[1].tick.enabled
- Type
boolean
axes[1].tick.width
- Type
number
- Default
1
axes[1].tick.size
- Type
number
- Default
6
axes[1].tick.color
- Type
string
- Default
'rgba(195, 195, 195, 1)'
axes[1].tick.values
- Type
any[]
axes[1].tick.minSpacing
- Type
number
axes[1].position
- Type
'left' | 'right'
axes[1].crossLines
Type
Object
axes[1].crossLines.enabled
- Type
boolean
axes[1].crossLines.type
- Type
'line' | 'range'
- Required
true
axes[1].crossLines.value
- Type
any
line
. axes[1].crossLines.range
- Type
[DataValue, DataValue]
range
. axes[1].crossLines.fill
- Type
string
axes[1].crossLines.fillOpacity
- Type
number
axes[1].crossLines.stroke
- Type
string
axes[1].crossLines.strokeWidth
- Type
number
axes[1].crossLines.strokeOpacity
- Type
number
axes[1].crossLines.lineDash
- Type
PixelSize[]
[6, 3]
means dashes with a length of 6
pixels with gaps between of 3
pixels. axes[1].crossLines.label
Type
Object
axes[1].crossLines.label.enabled
- Type
boolean
axes[1].crossLines.label.text
- Type
string
axes[1].crossLines.label.fontStyle
- Type
'normal' | 'italic' | 'oblique'
axes[1].crossLines.label.fontWeight
- Type
'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
axes[1].crossLines.label.fontSize
- Type
number
axes[1].crossLines.label.fontFamily
- Type
string
axes[1].crossLines.label.padding
- Type
number
axes[1].crossLines.label.color
- Type
string
axes[1].crossLines.label.position
- Type
'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'inside' | 'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom' | 'insideTopLeft' | 'insideBottomLeft' | 'insideTopRight' | 'insideBottomRight'
axes[1].crossLines.label.rotation
- Type
number
axes[1].thickness
- Type
number
axes[1].title
Type
Object
axes[1].title.enabled
- Type
boolean
axes[1].title.text
- Type
string
axes[1].title.fontStyle
- Type
'normal' | 'italic' | 'oblique'
axes[1].title.fontWeight
- Type
'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
axes[1].title.fontSize
- Type
number
axes[1].title.fontFamily
- Type
string
axes[1].title.color
- Type
string
axes[1].title.formatter
- Type
Function
function (params: AgAxisCaptionFormatterParams) => string;
interface AgAxisBoundSeries {
key: string;
name: string;
}
interface AgAxisCaptionFormatterParams {
defaultValue: string;
direction: 'x' | 'y';
boundSeries: AgAxisBoundSeries[];
}
Formatter to allow dynamic axis title calculation. axes[1].keys
- Type
string[]
axes[1].line
Type
Object
axes[1].line.width
- Type
number
- Default
1
axes[1].line.color
- Type
string
- Default
'rgba(195, 195, 195, 1)'
axes[1].label
Type
Object
axes[1].label.enabled
- Type
boolean
axes[1].label.fontStyle
- Type
'normal' | 'italic' | 'oblique'
- Default
'normal'
axes[1].label.fontWeight
- Type
'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
- Default
'normal'
axes[1].label.fontSize
- Type
number
- Default
12
axes[1].label.fontFamily
- Type
string
- Default
'Verdana, sans-serif'
axes[1].label.padding
- Type
number
- Default
5
axes[1].label.color
- Type
string
- Default
'#000000'
axes[1].label.rotation
- Type
number
- Default
0
axes[1].label.autoRotate
- Type
boolean
- Default
false
rotation
property is specified, it takes precedence. axes[1].label.autoRotateAngle
- Type
number
- Default
335
axes[1].label.avoidCollisions
- Type
boolean
false
, axis labels may collide. axes[1].label.minSpacing
- Type
number
axes[1].label.format
- Type
string
axes[1].label.formatter
- Type
Function
function (params: AgAxisLabelFormatterParams) => string | undefined;
interface AgAxisLabelFormatterParams {
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
axes[1].gridStyle
Type
Object
axes[1].gridStyle.stroke
- Type
string
- Default
'rgba(195, 195, 195, 1)'
axes[1].gridStyle.lineDash
- Type
PixelSize[]
- Default
[4, 2]
[6, 3]
means dashes with a length of 6
pixels with gaps between of 3
pixels. series
Type
Object
series.type
- Type
'column'
series.grouped
- Type
boolean
- Default
false
series.stacked
- Type
boolean
series.stackGroup
- Type
string
series.normalizedTo
- Type
number
grouped
is true
. For example, if normalizedTo
is set to 100
, the column stacks will all be scaled proportionally so that each of their totals is 100. series.xKey
- Type
string
- Required
true
series.yKey
- Type
string
- Required
true
series.xName
- Type
string
series.yName
- Type
string
yName
will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. series.legendItemName
- Type
string
series.fill
- Type
string
series.stroke
- Type
string
series.strokeWidth
- Type
number
- Default
1
series.fillOpacity
- Type
number
- Default
1
series.strokeOpacity
- Type
number
- Default
1
series.lineDash
- Type
PixelSize[]
[6, 3]
means dashes with a length of 6
pixels with gaps between of 3
pixels. series.lineDashOffset
- Type
number
- Default
0
series.shadow
Type
Object
series.shadow.enabled
- Type
boolean
series.shadow.color
- Type
string
series.shadow.xOffset
- Type
number
series.shadow.yOffset
- Type
number
series.shadow.blur
- Type
number
series.label
Type
Object
series.label.placement
- Type
'inside' | 'outside'
series.label.formatter
- Type
Function
function (params: AgCartesianSeriesLabelFormatterParams) => string;
interface AgCartesianSeriesLabelFormatterParams {
seriesId: string;
value: number;
}
Function used to turn 'yKey' values into text to be displayed by a label. By default the values are simply stringified. series.label.enabled
- Type
boolean
series.label.fontStyle
- Type
'normal' | 'italic' | 'oblique'
series.label.fontWeight
- Type
'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
series.label.fontSize
- Type
number
series.label.fontFamily
- Type
string
series.label.color
- Type
string
series.tooltip
Type
Object
series.tooltip.renderer
- Type
Function
function (params: AgColumnSeriesTooltipRendererParams) => string | AgTooltipRendererResult;
interface AgColumnSeriesTooltipRendererParams {
stackGroup: string;
xKey: string;
xValue: any;
xName: string;
yKey: string;
yValue: any;
yName: string;
datum: any;
title: string;
color: string;
seriesId: string;
}
Function used to create the content for tooltips. series.tooltip.enabled
- Type
boolean
series.tooltip.showArrow
- Type
boolean
showArrow
to true
. To remove the arrow, set showArrow
to false
. series.tooltip.position
Type
Object
series.tooltip.position.type
- Type
'pointer' | 'node'
- Required
true
series.tooltip.position.xOffset
- Type
number
series.tooltip.position.yOffset
- Type
number
series.tooltip.interaction
Type
Object
series.tooltip.interaction.enabled
- Type
boolean
- Required
true
series.formatter
- Type
Function
function (params: AgColumnSeriesFormatterParams<DatumType>) => AgColumnSeriesFormat;
interface AgColumnSeriesFormat {
fill: string;
stroke: string;
strokeWidth: number;
}
interface AgColumnSeriesFormatterParams<DatumType> {
datum: DatumType;
fill: string;
stroke: string;
strokeWidth: number;
highlighted: boolean;
xKey: string;
yKey: string;
seriesId: string;
stackGroup: string;
}
Function used to return formatting for individual columns, based on the given parameters. If the current 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. series.listeners
Type
Object
series.listeners.nodeClick
- Type
Function
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;
}
The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is clicked. series.listeners.nodeDoubleClick
- Type
Function
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;
}
The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is double clicked. series.id
- Type
string
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
series.data
- Type
DatumType[]
series.visible
- Type
boolean
series.showInLegend
- Type
boolean
series.cursor
- Type
string
cursor
property. series.highlightStyle
Type
Object
series.highlightStyle.item
Type
Object
series.highlightStyle.item.fill
- Type
string
undefined
for no highlight. series.highlightStyle.item.fillOpacity
- Type
number
series.highlightStyle.item.stroke
- Type
string
undefined
for no highlight. series.highlightStyle.item.strokeWidth
- Type
number
undefined
for no highlight. pxseries.highlightStyle.series
Type
Object
series.highlightStyle.series.enabled
- Type
boolean
series.highlightStyle.series.dimOpacity
- Type
number
undefined
or 1
for no dimming. series.highlightStyle.series.strokeWidth
- Type
number
undefined
for no highlight. pxseries.nodeClickRange
- Type
PixelSize | 'exact' | 'nearest'
legend
Type
Object
legend.enabled
- Type
boolean
legend.position
- Type
'top' | 'right' | 'bottom' | 'left'
- Default
'bottom'
legend.orientation
- Type
'horizontal' | 'vertical'
legend.maxWidth
- Type
number
legend.maxHeight
- Type
number
legend.spacing
- Type
number
- Default
20
legend.item
Type
Object
legend.item.marker
Type
Object
legend.item.marker.size
- Type
number
- Default
15
legend.item.marker.shape
- Type
'circle' | 'cross' | 'diamond' | 'heart' | 'plus' | 'triangle' | any
- Default
'square'
'square'
if there is none. legend.item.marker.padding
- Type
number
- Default
8
legend.item.marker.strokeWidth
- Type
number
- Default
1
legend.item.label
Type
Object
legend.item.label.maxLength
- Type
number
legend.item.label.color
- Type
string
- Default
'black'
legend.item.label.fontStyle
- Type
'normal' | 'italic' | 'oblique'
- Default
'normal'
legend.item.label.fontWeight
- Type
'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
- Default
'normal'
legend.item.label.fontSize
- Type
number
- Default
12
legend.item.label.fontFamily
- Type
string
- Default
'Verdana, sans-serif'
legend.item.label.formatter
- Type
Function
function (params: AgChartLegendLabelFormatterParams) => string;
interface AgChartLegendLabelFormatterParams {
seriesId: string;
itemId: any;
value: string;
}
Function used to render legend labels. Where id
is a series ID, itemId
is component ID within a series, such as a field name or an item index. legend.item.maxWidth
- Type
number
legend.item.paddingX
- Type
number
- Default
16
legend.item.paddingY
- Type
number
- Default
8
legend.item.toggleSeriesVisible
- Type
boolean
false
to turn off toggling of the series visibility in the chart when the legend item is clicked. legend.reverseOrder
- Type
boolean
true
. legend.listeners
Type
Object
legend.listeners.legendItemClick
- Type
Function
function (event: AgChartLegendClickEvent) => void;
interface AgChartLegendClickEvent {
type: T;
seriesId: string;
itemId: string;
enabled: boolean;
}
The listener to call when a legend item is clicked. legend.listeners.legendItemDoubleClick
- Type
Function
function (event: AgChartLegendDoubleClickEvent) => void;
interface AgChartLegendDoubleClickEvent {
type: T;
seriesId: string;
itemId: string;
enabled: boolean;
}
The listener to call when a legend item is double clicked. legend.pagination
Type
Object
legend.pagination.marker
Type
Object
legend.pagination.marker.size
- Type
number
legend.pagination.marker.shape
- Type
'circle' | 'cross' | 'diamond' | 'heart' | 'plus' | 'triangle' | any
'triangle'
marker shape. legend.pagination.marker.padding
- Type
number
legend.pagination.activeStyle
Type
Object
legend.pagination.activeStyle.fill
- Type
string
legend.pagination.activeStyle.fillOpacity
- Type
number
legend.pagination.activeStyle.stroke
- Type
string
legend.pagination.activeStyle.strokeWidth
- Type
number
legend.pagination.activeStyle.strokeOpacity
- Type
number
legend.pagination.inactiveStyle
Type
Object
legend.pagination.inactiveStyle.fill
- Type
string
legend.pagination.inactiveStyle.fillOpacity
- Type
number
legend.pagination.inactiveStyle.stroke
- Type
string
legend.pagination.inactiveStyle.strokeWidth
- Type
number
legend.pagination.inactiveStyle.strokeOpacity
- Type
number
legend.pagination.highlightStyle
Type
Object
legend.pagination.highlightStyle.fill
- Type
string
legend.pagination.highlightStyle.fillOpacity
- Type
number
legend.pagination.highlightStyle.stroke
- Type
string
legend.pagination.highlightStyle.strokeWidth
- Type
number
legend.pagination.highlightStyle.strokeOpacity
- Type
number
legend.pagination.label
Type
Object
legend.pagination.label.color
- Type
string
legend.pagination.label.fontStyle
- Type
'normal' | 'italic' | 'oblique'
legend.pagination.label.fontWeight
- Type
'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
legend.pagination.label.fontSize
- Type
number
legend.pagination.label.fontFamily
- Type
string
width
- Type
number
height
- Type
number
autoSize
- Type
boolean
- Default
true
false
to disable this behaviour. If width
or height
are specified, auto-sizing will be active for the other unspecified dimension.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. padding
Type
Object
padding.top
- Type
number
- Default
20
padding.right
- Type
number
- Default
20
padding.bottom
- Type
number
- Default
20
padding.left
- Type
number
- Default
20
seriesAreaPadding
Type
Object
seriesAreaPadding.top
- Type
number
- Default
0
seriesAreaPadding.right
- Type
number
- Default
0
seriesAreaPadding.bottom
- Type
number
- Default
0
seriesAreaPadding.left
- Type
number
- Default
0
background
Type
Object
background.visible
- Type
boolean
- Default
true
background.fill
- Type
string
- Default
'#FFFFFF'
title
Type
Object
title.enabled
- Type
boolean
- Default
false
title.text
- Type
string
- Default
'Title'
title.fontStyle
- Type
'normal' | 'italic' | 'oblique'
- Default
'normal'
title.fontWeight
- Type
'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
- Default
'bold'
title.fontSize
- Type
number
- Default
18
title.fontFamily
- Type
string
- Default
'Verdana, sans-serif'
title.color
- Type
string
- Default
'#000000'
title.spacing
- Type
number
title.maxWidth
- Type
number
title.maxHeight
- Type
number
title.wrapping
- Type
'never' | 'always' | 'hyphenate' | 'on-space'
- Default
'hyphenate'
'always'
will always wrap text to fit within the maxWidth
. 'hyphenate'
is similar to 'always'
, but inserts a hyphen (-
) if forced to wrap in the middle of a word. 'on-space'
will only wrap on white space. If there is no possibility to wrap a line on space and satisfy maxWidth
, the text will be truncated. 'never'
disables text wrapping.
subtitle
Type
Object
subtitle.enabled
- Type
boolean
- Default
false
subtitle.text
- Type
string
- Default
'Subtitle'
subtitle.fontStyle
- Type
'normal' | 'italic' | 'oblique'
- Default
'normal'
subtitle.fontWeight
- Type
'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
- Default
'bold'
subtitle.fontSize
- Type
number
- Default
18
subtitle.fontFamily
- Type
string
- Default
'Verdana, sans-serif'
subtitle.color
- Type
string
- Default
'#000000'
subtitle.spacing
- Type
number
subtitle.maxWidth
- Type
number
subtitle.maxHeight
- Type
number
subtitle.wrapping
- Type
'never' | 'always' | 'hyphenate' | 'on-space'
- Default
'hyphenate'
'always'
will always wrap text to fit within the maxWidth
. 'hyphenate'
is similar to 'always'
, but inserts a hyphen (-
) if forced to wrap in the middle of a word. 'on-space'
will only wrap on white space. If there is no possibility to wrap a line on space and satisfy maxWidth
, the text will be truncated. 'never'
disables text wrapping.
footnote
Type
Object
footnote.enabled
- Type
boolean
- Default
false
footnote.text
- Type
string
- Default
'Footer'
footnote.fontStyle
- Type
'normal' | 'italic' | 'oblique'
- Default
'normal'
footnote.fontWeight
- Type
'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
- Default
'bold'
footnote.fontSize
- Type
number
- Default
18
footnote.fontFamily
- Type
string
- Default
'Verdana, sans-serif'
footnote.color
- Type
string
- Default
'#000000'
footnote.spacing
- Type
number
footnote.maxWidth
- Type
number
footnote.maxHeight
- Type
number
footnote.wrapping
- Type
'never' | 'always' | 'hyphenate' | 'on-space'
- Default
'hyphenate'
'always'
will always wrap text to fit within the maxWidth
. 'hyphenate'
is similar to 'always'
, but inserts a hyphen (-
) if forced to wrap in the middle of a word. 'on-space'
will only wrap on white space. If there is no possibility to wrap a line on space and satisfy maxWidth
, the text will be truncated. 'never'
disables text wrapping.
tooltip
Type
Object
tooltip.enabled
- Type
boolean
- Default
true
tooltip.showArrow
- Type
boolean
showArrow
to true
. To remove the arrow, set showArrow
to false
. tooltip.class
- Type
string
tooltip.range
- Type
PixelSize | 'exact' | 'nearest'
- Default
'nearest'
tooltip.position
Type
Object
tooltip.position.type
- Type
'pointer' | 'node'
- Required
true
tooltip.position.xOffset
- Type
number
tooltip.position.yOffset
- Type
number
tooltip.delay
- Type
number
- Default
0
listeners
Type
Object
listeners.seriesNodeClick
- Type
Function
function (event: AgNodeClickEvent) => any;
interface AgNodeClickEvent {
type: T;
seriesId: string;
datum: any;
xKey: string;
yKey: string;
sizeKey: string;
labelKey: string;
colorKey: string;
angleKey: string;
calloutLabelKey: string;
sectorLabelKey: string;
radiusKey: string;
event: Event;
}
The listener to call when a node (marker, column, bar, tile or a pie sector) in any series is clicked. In case a chart has multiple series, the chart's seriesNodeClick
event can be used to listen to nodeClick
events of all the series at once. listeners.seriesNodeDoubleClick
- Type
Function
function (event: AgNodeDoubleClickEvent) => any;
interface AgNodeDoubleClickEvent {
type: T;
seriesId: string;
datum: any;
xKey: string;
yKey: string;
sizeKey: string;
labelKey: string;
colorKey: string;
angleKey: string;
calloutLabelKey: string;
sectorLabelKey: string;
radiusKey: string;
event: Event;
}
The listener to call when a node (marker, column, bar, tile or a pie sector) in any series is double clicked. In case a chart has multiple series, the chart's seriesNodeDoubleClick
event can be used to listen to nodeDoubleClick
events of all the series at once. listeners.click
- Type
Function
function (event: AgChartClickEvent) => any;
interface AgChartClickEvent {
type: T;
event: Event;
}
The listener to call to signify a general click on the chart by the user. listeners.doubleClick
- Type
Function
function (event: AgChartDoubleClickEvent) => any;
interface AgChartDoubleClickEvent {
type: T;
event: Event;
}
The listener to call to signify a double click on the chart by the user. highlight
Type
Object
highlight.range
- Type
'tooltip' | 'node'
tooltip.range
. Set this to 'node'
to highlight nodes when within the series[].nodeClickRange
. overlays
Type
Object
overlays.noData
Type
Object
overlays.noData.text
- Type
string
- Default
'No data to display'
overlays.noData.renderer
- Type
Function
function () => string;
A function for generating HTML string for overlay content. navigator
Type
Object
navigator.enabled
- Type
boolean
- Default
false
navigator.height
- Type
number
- Default
30
navigator.margin
- Type
number
- Default
10
navigator.min
- Type
number
- Default
0
[0, 1]
interval. navigator.max
- Type
number
- Default
1
[0, 1]
interval. navigator.mask
Type
Object
navigator.mask.fill
- Type
string
- Default
'#999999'
navigator.mask.stroke
- Type
string
- Default
'#999999'
navigator.mask.strokeWidth
- Type
number
- Default
1
navigator.mask.fillOpacity
- Type
number
- Default
0.2
[0, 1]
interval, where 0
is effectively no masking. navigator.minHandle
Type
Object
navigator.minHandle.fill
- Type
string
- Default
'#f2f2f2'
navigator.minHandle.stroke
- Type
string
- Default
'#999999'
navigator.minHandle.strokeWidth
- Type
number
- Default
1
navigator.minHandle.width
- Type
number
- Default
8
navigator.minHandle.height
- Type
number
- Default
16
navigator.minHandle.gripLineGap
- Type
number
- Default
2
navigator.minHandle.gripLineLength
- Type
number
- Default
8
navigator.maxHandle
Type
Object
navigator.maxHandle.fill
- Type
string
- Default
'#f2f2f2'
navigator.maxHandle.stroke
- Type
string
- Default
'#999999'
navigator.maxHandle.strokeWidth
- Type
number
- Default
1
navigator.maxHandle.width
- Type
number
- Default
8
navigator.maxHandle.height
- Type
number
- Default
16
navigator.maxHandle.gripLineGap
- Type
number
- Default
2
navigator.maxHandle.gripLineLength
- Type
number
- Default
8
theme
- Type
string | AgChartTheme
- Default
'ag-default'
AgChartTheme
instance to customise. const options = {
series: [
{
type: 'column',
xKey: 'month',
yKey: 'revenue',
stacked: true
},
{
type: 'column',
xKey: 'month',
yKey: 'profit',
stacked: true
}
]
};
<AgChartsReact options={options} />