Results:
Loading...

Vue 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.

API Explorer

Open chart preview fullscreen
Open fullscreen
Open in Plunker
Column
Bar
Line
Scatter
Area
Pie
Histogram

Options

Search:
type'line' | 'bar' | 'column' | 'area' | 'scatter' | 'histogram' | TAddonType
Default: N/A

If specified overrides the default series type.
dataany[]
Required

The data to render the chart from. If this is not specified, it must be set on individual series instead.
containerHTMLElement | null
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).

type'category'
Required

paddingInnernumber
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
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
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

widthnumber
Default: N/A

The width in pixels of the axis ticks (and corresponding grid line).
 px
sizenumber
Default: N/A

The length in pixels of the axis ticks.
 px
colorstring
Default: N/A

The colour of the axis ticks.
valuesany[]
Default: N/A

Array of values in axis units to display as ticks along the axis. The values in this array must be compatible with the axis type.
minSpacingnumber
Default: N/A

Minimum gap in pixels between tick lines.
maxSpacingnumber
Default: N/A

Maximum gap in pixels between tick lines.
position'top' | 'bottom'
Default: N/A

The position on the chart where the axis should be rendered.
top
bottom
enabledboolean
Default: N/A

Whether or not the title should be shown.
false
true
textstring
Default: N/A

The text to show in the title.
fontStyle'normal' | 'italic' | 'oblique'
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'
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
Default: N/A

The font size in pixels to use for the title.
 px
fontFamilystring
Default: N/A

The font family to use for the title.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
colorstring
Default: N/A

The colour to use for the title.
widthnumber
Default: 1

The width in pixels of the axis line.
 px
colorstring
Default: 'rgba(195, 195, 195, 1)'

The colour of the axis line.
fontStyle'normal' | 'italic' | 'oblique'
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'
Default: 'normal'

The font weight to use for the labels.
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
fontSizenumber
Default: 12

The font size in pixels to use for the labels.
 px
fontFamilystring
Default: 'Verdana, sans-serif'

The font family to use for the labels
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
paddingnumber
Default: 5

Padding in pixels between the axis label and the tick.
 px
colorstring
Default: '#000000'

The colour to use for the labels
rotationnumber
Default: 0

The rotation of the axis labels in degrees. Note: for integrated charts the default is 335 degrees, unless the axis shows grouped or default categories (indexes). The first row of labels in a grouped category axis is rotated perpendicular to the axis line.
 °
autoRotateboolean
Default: false

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 rotation property is specified, it takes precedence.
false
true
autoRotateAnglenumber
Default: 335

If autoRotate is enabled, specifies the rotation angle to use when autoRotate is activated. Defaults to an angle of 335 degrees if unspecified.
 °
avoidCollisionsboolean
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
Default: N/A

Minimum gap in pixels between the axis labels before being removed to avoid collisions.
 px
formatstring
Default: N/A

Format string used when rendering labels.
formatterFunction
Default: N/A

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
strokestring
Default: 'rgba(195, 195, 195, 1)'

The colour of the grid line.
lineDashPixelSize[]
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.
enabledboolean
Default: N/A

Whether or not to show the cross line.
false
true
type'line' | 'range'
Required

Type of cross line to render.
line
range
valueany
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]
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
Default: N/A

The colour to use for the fill of the range.
fillOpacitynumber
Default: N/A

The opacity of the fill for the range.
strokestring
Default: N/A

The colour of the stroke for the lines.
strokeWidthnumber
Default: N/A

The width in pixels of the stroke for the lines.
 px
strokeOpacitynumber
Default: N/A

The opacity of the stroke for the lines.
lineDashPixelSize[]
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.
enabledboolean
Default: N/A

Whether or not to show the cross line label.
false
true
textstring
Default: N/A

The text to show in the label.
fontStyle'normal' | 'italic' | 'oblique'
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'
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
Default: N/A

The font size in pixels to use for the label.
 px
fontFamilystring
Default: N/A

The font family to use for the label.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
paddingnumber
Default: N/A

Padding in pixels between the label and the edge of the crossLine.
 px
colorstring
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'
Default: N/A

The position of the crossLine label.
rotationnumber
Default: N/A

The rotation of the crossLine label in degrees.
keysstring[]
Default: N/A

thicknessnumber
Default: N/A

If set to a non-zero value, the axis will have the specified thickness regardless of label size.
 px
type'number'
Required

niceboolean
Default: true

If 'true', the range will be rounded up to ensure nice equal spacing between the ticks.
false
true
minnumber
Default: N/A

User override for the automatically determined min value (based on series data).
maxnumber
Default: N/A

User override for the automatically determined max value (based on series data).
intervalnumber
Default: N/A

The step value between ticks specified as a number. If the configured interval results in too many ticks given the chart size, it will be ignored.
widthnumber
Default: 1

The width in pixels of the axis ticks (and corresponding grid line).
 px
sizenumber
Default: 6

The length in pixels of the axis ticks.
 px
colorstring
Default: 'rgba(195, 195, 195, 1)'

The colour of the axis ticks.
valuesany[]
Default: N/A

Array of values in axis units to display as ticks along the axis. The values in this array must be compatible with the axis type.
minSpacingnumber
Default: N/A

Minimum gap in pixels between tick lines.
maxSpacingnumber
Default: N/A

Maximum gap in pixels between tick lines.
position'left' | 'right'
Default: N/A

The position on the chart where the axis should be rendered.
left
right
enabledboolean
Default: N/A

Whether or not the title should be shown.
false
true
textstring
Default: N/A

The text to show in the title.
fontStyle'normal' | 'italic' | 'oblique'
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'
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
Default: N/A

The font size in pixels to use for the title.
 px
fontFamilystring
Default: N/A

The font family to use for the title.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
colorstring
Default: N/A

The colour to use for the title.
widthnumber
Default: 1

The width in pixels of the axis line.
 px
colorstring
Default: 'rgba(195, 195, 195, 1)'

The colour of the axis line.
fontStyle'normal' | 'italic' | 'oblique'
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'
Default: 'normal'

The font weight to use for the labels.
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
fontSizenumber
Default: 12

The font size in pixels to use for the labels.
 px
fontFamilystring
Default: 'Verdana, sans-serif'

The font family to use for the labels
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
paddingnumber
Default: 5

Padding in pixels between the axis label and the tick.
 px
colorstring
Default: '#000000'

The colour to use for the labels
rotationnumber
Default: 0

The rotation of the axis labels in degrees. Note: for integrated charts the default is 335 degrees, unless the axis shows grouped or default categories (indexes). The first row of labels in a grouped category axis is rotated perpendicular to the axis line.
 °
autoRotateboolean
Default: false

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 rotation property is specified, it takes precedence.
false
true
autoRotateAnglenumber
Default: 335

If autoRotate is enabled, specifies the rotation angle to use when autoRotate is activated. Defaults to an angle of 335 degrees if unspecified.
 °
avoidCollisionsboolean
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
Default: N/A

Minimum gap in pixels between the axis labels before being removed to avoid collisions.
 px
formatstring
Default: N/A

Format string used when rendering labels.
formatterFunction
Default: N/A

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
strokestring
Default: 'rgba(195, 195, 195, 1)'

The colour of the grid line.
lineDashPixelSize[]
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.
enabledboolean
Default: N/A

Whether or not to show the cross line.
false
true
type'line' | 'range'
Required

Type of cross line to render.
line
range
valueany
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]
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
Default: N/A

The colour to use for the fill of the range.
fillOpacitynumber
Default: N/A

The opacity of the fill for the range.
strokestring
Default: N/A

The colour of the stroke for the lines.
strokeWidthnumber
Default: N/A

The width in pixels of the stroke for the lines.
 px
strokeOpacitynumber
Default: N/A

The opacity of the stroke for the lines.
lineDashPixelSize[]
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.
enabledboolean
Default: N/A

Whether or not to show the cross line label.
false
true
textstring
Default: N/A

The text to show in the label.
fontStyle'normal' | 'italic' | 'oblique'
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'
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
Default: N/A

The font size in pixels to use for the label.
 px
fontFamilystring
Default: N/A

The font family to use for the label.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
paddingnumber
Default: N/A

Padding in pixels between the label and the edge of the crossLine.
 px
colorstring
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'
Default: N/A

The position of the crossLine label.
rotationnumber
Default: N/A

The rotation of the crossLine label in degrees.
keysstring[]
Default: N/A

thicknessnumber
Default: N/A

If set to a non-zero value, the axis will have the specified thickness regardless of label size.
 px
type'bar' | 'column'
Default: N/A

bar
column
groupedboolean
Default: false

Whether to show different y-values as separate bars (grouped) or not (stacked).
false
true
stackedboolean
Default: N/A

An option indicating if the bars/columns should be stacked.
false
true
stackGroupstring
Default: N/A

An ID to be used to group stacked items.
normalizedTonumber
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
Required

The key to use to retrieve x-values from the data.
yKeystring
Required

The keys to use to retrieve y-values from the data.
xNamestring
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
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
Default: N/A

The colour to use for the fill of the bars.
strokestring
Default: N/A

The colours to use for the stroke of the bars.
strokeWidthnumber
Default: 1

The width in pixels of the stroke for the bars.
 px
fillOpacitynumber
Default: 1

The opacity of the fill for the bars.
strokeOpacitynumber
Default: 1

The opacity of the stroke for the bars.
lineDashPixelSize[]
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
Default: 0

The initial offset of the dashed line in pixels.
 px
enabledboolean
Default: N/A

Whether or not the shadow is visible.
false
true
colorstring
Default: N/A

The colour of the shadow.
xOffsetnumber
Default: N/A

The horizontal offset in pixels for the shadow.
 px
yOffsetnumber
Default: N/A

The vertical offset in pixels for the shadow.
 px
blurnumber
Default: N/A

The radius of the shadow's blur, given in pixels.
 px
placement'inside' | 'outside'
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;
}
Function used to turn 'yKey' values into text to be displayed by a label. By default the values are simply stringified.
enabledboolean
Default: N/A

Whether or not the labels should be shown.
false
true
fontStyle'normal' | 'italic' | 'oblique'
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'
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
Default: N/A

The font size in pixels to use for the labels.
 px
fontFamilystring
Default: N/A

The font family to use for the labels.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
colorstring
Default: N/A

The colour to use for the labels.
rendererFunction
Default: N/A

function (params: AgBarSeriesTooltipRendererParams) => string | AgTooltipRendererResult;

interface AgBarSeriesTooltipRendererParams {
  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.
enabledboolean
Default: N/A

Whether or not to show tooltips when the series are hovered over.
false
true
type'pointer' | 'node'
Required

The type of positioning for the tooltip. By default, the tooltip follows the pointer.
pointer
node
xOffsetnumber
Default: N/A

The horizontal offset in pixels for the position of the tooltip.
 px
yOffsetnumber
Default: N/A

The vertical offset in pixels for the position of the tooltip.
 px
enabledboolean
Required

Set to true to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text
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;
  stackGroup: string;
}
Function used to return formatting for individual bars/columns, based on the given parameters. If the current bar/column is highlighted, the highlighted property will be set to true; make sure to check this if you want to differentiate between the highlighted and un-highlighted states.
nodeClickFunction
Default: N/A

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.
nodeDoubleClickFunction
Default: N/A

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.
idstring
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[]
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
Default: N/A

Whether or not to display the series.
false
true
showInLegendboolean
Default: N/A

Whether or not to include the series in the legend.
false
true
cursorstring
Default: N/A

The cursor to use for hovered area markers. This config is identical to the CSS cursor property.
fillstring
Default: N/A

The fill colour of a marker when tapped or hovered over. Use undefined for no highlight.
fillOpacitynumber
Default: N/A

The opacity of the fill for the highlighted item.
strokestring
Default: N/A

The stroke colour of a marker when tapped or hovered over. Use undefined for no highlight.
strokeWidthnumber
Default: N/A

The stroke width of a marker when tapped or hovered over. Use undefined for no highlight.
 px
enabledboolean
Default: N/A

false
true
dimOpacitynumber
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
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
nodeClickRangePixelSize | 'exact' | 'nearest'
Default: N/A

Range from a node a click triggers the listener.
widthnumber
Default: N/A

The width of the chart in pixels. Has no effect if autoSize is set to true.
 px
heightnumber
Default: N/A

The height of the chart in pixels. Has no effect if autoSize is set to true.
 px
autoSizeboolean
Default: true

By default, the chart will resize automatically to fill the container element. Set this to false to disable this behaviour. If either the width or height are set, auto-sizing will be disabled unless this is explicitly set to true.
Important: if this config is set to true, make sure to give the chart's container element an explicit size, otherwise you will run into a chicken and egg situation where the container expects to size itself according to the content and the chart expects to size itself according to the container.

false
true
topnumber
Default: 20

The number of pixels of padding at the top of the chart area.
 px
rightnumber
Default: 20

The number of pixels of padding at the right of the chart area.
 px
bottomnumber
Default: 20

The number of pixels of padding at the bottom of the chart area.
 px
leftnumber
Default: 20

The number of pixels of padding at the left of the chart area.
 px
topnumber
Default: 0

The number of pixels of padding at the top of the series area.
 px
rightnumber
Default: 0

The number of pixels of padding at the right of the series area.
 px
bottomnumber
Default: 0

The number of pixels of padding at the bottom of the series area.
 px
leftnumber
Default: 0

The number of pixels of padding at the left of the series area.
 px
visibleboolean
Default: true

Whether or not the background should be visible.
false
true
fillstring
Default: '#FFFFFF'

Colour of the chart background.
enabledboolean
Default: false

Whether or not the text should be shown.
false
true
textstring
Default: 'Title'

The text to display.
fontStyle'normal' | 'italic' | 'oblique'
Default: 'normal'

The font style to use for the text.
normal
italic
oblique
fontWeight'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
Default: 'bold'

The font weight to use for the text.
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
fontSizenumber
Default: 18

The font size in pixels to use for the text.
 px
fontFamilystring
Default: 'Verdana, sans-serif'

The font family to use for the text.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
colorstring
Default: '#000000'

The colour to use for the text.
spacingnumber
Default: N/A

Spacing added to help position the text.
enabledboolean
Default: false

Whether or not the text should be shown.
false
true
textstring
Default: 'Subtitle'

The text to display.
fontStyle'normal' | 'italic' | 'oblique'
Default: 'normal'

The font style to use for the text.
normal
italic
oblique
fontWeight'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
Default: 'bold'

The font weight to use for the text.
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
fontSizenumber
Default: 18

The font size in pixels to use for the text.
 px
fontFamilystring
Default: 'Verdana, sans-serif'

The font family to use for the text.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
colorstring
Default: '#000000'

The colour to use for the text.
spacingnumber
Default: N/A

Spacing added to help position the text.
enabledboolean
Default: false

Whether or not the text should be shown.
false
true
textstring
Default: 'Footer'

The text to display.
fontStyle'normal' | 'italic' | 'oblique'
Default: 'normal'

The font style to use for the text.
normal
italic
oblique
fontWeight'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
Default: 'bold'

The font weight to use for the text.
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
fontSizenumber
Default: 18

The font size in pixels to use for the text.
 px
fontFamilystring
Default: 'Verdana, sans-serif'

The font family to use for the text.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
colorstring
Default: '#000000'

The colour to use for the text.
spacingnumber
Default: N/A

Spacing added to help position the text.
enabledboolean
Default: true

Set to false to disable tooltips for all series in the chart.
false
true
classstring
Default: N/A

A class name to be added to the tooltip element of the chart.
rangePixelSize | 'exact' | 'nearest'
Default: 'nearest'

Range from a point that triggers the tooltip to show.
type'pointer' | 'node'
Required

The type of positioning for the tooltip. By default, the tooltip follows the pointer.
pointer
node
xOffsetnumber
Default: N/A

The horizontal offset in pixels for the position of the tooltip.
 px
yOffsetnumber
Default: N/A

The vertical offset in pixels for the position of the tooltip.
 px
delaynumber
Default: 0

The time interval (in milliseconds) after which the tooltip is shown.
 ms
enabledboolean
Default: true

Whether or not to show the legend.
false
true
position'top' | 'right' | 'bottom' | 'left'
Default: 'right'

Where the legend should show in relation to the chart.
top
right
bottom
left
orientation'horizontal' | 'vertical'
Default: N/A

How the legend items should be arranged.
horizontal
vertical
maxWidthnumber
Default: N/A

Used to constrain the width of the legend.
 px
maxHeightnumber
Default: N/A

Used to constrain the height of the legend.
 px
spacingnumber
Default: 20

The spacing in pixels to use outside the legend.
 px
sizenumber
Default: 15

The size in pixels of the markers in the legend.
 px
shape'circle' | 'cross' | 'diamond' | 'heart' | 'plus' | 'triangle' | any
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
Default: 8

The padding in pixels between a legend marker and the corresponding label.
 px
strokeWidthnumber
Default: 1

The width in pixels of the stroke for markers in the legend.
 px
maxLengthnumber
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
Default: 'black'

The colour of the text.
fontStyle'normal' | 'italic' | 'oblique'
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'
Default: 'normal'

The font weight to use for the legend.
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
fontSizenumber
Default: 12

The font size in pixels to use for the legend.
 px
fontFamilystring
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;
}
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.
maxWidthnumber
Default: N/A

Used to constrain the width of legend items.
 px
paddingXnumber
Default: 16

The horizontal spacing in pixels to use between legend items.
 px
paddingYnumber
Default: 8

The vertical spacing in pixels to use between legend items.
 px
toggleSeriesVisibleboolean
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
Default: N/A

Reverse the display order of legend items if true.
false
true
legendItemClickFunction
Default: N/A

function (event: AgChartLegendClickEvent) => void;

interface AgChartLegendClickEvent {
  type: T;
  seriesId: string;
  itemId: string;
  enabled: boolean;
}
The listener to call when a legend item is clicked.
legendItemDoubleClickFunction
Default: N/A

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.
sizenumber
Default: N/A

The size in pixels of the pagination buttons.
 px
shape'circle' | 'cross' | 'diamond' | 'heart' | 'plus' | 'triangle' | any
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
Default: N/A

The inner padding in pixels between a pagination button and the pagination label.
 px
fillstring
Default: N/A

The fill colour to use for the pagination button markers.
fillOpacitynumber
Default: N/A

Opacity of the pagination buttons.
strokestring
Default: N/A

The colour to use for the button strokes.
strokeWidthnumber
Default: N/A

The width in pixels of the button strokes.
 px
strokeOpacitynumber
Default: N/A

Opacity of the button strokes.
fillstring
Default: N/A

The fill colour to use for the pagination button markers.
fillOpacitynumber
Default: N/A

Opacity of the pagination buttons.
strokestring
Default: N/A

The colour to use for the button strokes.
strokeWidthnumber
Default: N/A

The width in pixels of the button strokes.
 px
strokeOpacitynumber
Default: N/A

Opacity of the button strokes.
fillstring
Default: N/A

The fill colour to use for the pagination button markers.
fillOpacitynumber
Default: N/A

Opacity of the pagination buttons.
strokestring
Default: N/A

The colour to use for the button strokes.
strokeWidthnumber
Default: N/A

The width in pixels of the button strokes.
 px
strokeOpacitynumber
Default: N/A

Opacity of the button strokes.
colorstring
Default: N/A

The colour of the text.
fontStyle'normal' | 'italic' | 'oblique'
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'
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
Default: N/A

The font size in pixels to use for the pagination label.
 px
fontFamilystring
Default: N/A

The font family to use for the pagination label.
Verdana, sans-serif
Arial, sans-serif
Times New Roman, serif
seriesNodeClickFunction
Default: N/A

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.
seriesNodeDoubleClickFunction
Default: N/A

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.
clickFunction
Default: N/A

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.
doubleClickFunction
Default: N/A

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.
range'tooltip' | 'node'
Default: N/A

By default, nodes will be highlighted when the cursor is within the tooltip.range. Set this to 'node' to highlight nodes when within the series[].nodeClickRange.
tooltip
node
textstring
Default: 'No data to display'

Text to render in the overlay.
rendererFunction
Default: N/A

function () => string;
A function for generating HTML string for overlay content.
enabledboolean
Default: false

Whether or not to show the navigator.
false
true
heightnumber
Default: 30

The height of the navigator.
 px
marginnumber
Default: 10

The distance between the navigator and the bottom axis.
 px
minnumber
Default: 0

The start of the visible range in the [0, 1] interval.
maxnumber
Default: 1

The end of the visible range in the [0, 1] interval.
fillstring
Default: '#999999'

The fill colour used by the mask.
strokestring
Default: '#999999'

The stroke colour used by the mask.
strokeWidthnumber
Default: 1

The stroke width used by the mask.
 px
fillOpacitynumber
Default: 0.2

The opacity of the mask's fill in the [0, 1] interval, where 0 is effectively no masking.
fillstring
Default: '#f2f2f2'

The fill colour used by the handle.
strokestring
Default: '#999999'

The stroke colour used by the handle.
strokeWidthnumber
Default: 1

The stroke width used by the handle.
 px
widthnumber
Default: 8

The width of the handle.
 px
heightnumber
Default: 16

The height of the handle.
 px
gripLineGapnumber
Default: 2

The distance between the handle's grip lines.
 px
gripLineLengthnumber
Default: 8

The length of the handle's grip lines.
 px
fillstring
Default: '#f2f2f2'

The fill colour used by the handle.
strokestring
Default: '#999999'

The stroke colour used by the handle.
strokeWidthnumber
Default: 1

The stroke width used by the handle.
 px
widthnumber
Default: 8

The width of the handle.
 px
heightnumber
Default: 16

The height of the handle.
 px
gripLineGapnumber
Default: 2

The distance between the handle's grip lines.
 px
gripLineLengthnumber
Default: 8

The length of the handle's grip lines.
 px
themestring | AgChartTheme
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
const options = {
  series: [
    {
      type: 'column',
      xKey: 'month',
      yKey: 'revenue',
      stacked: true
    },
    {
      type: 'column',
      xKey: 'month',
      yKey: 'profit',
      stacked: true
    }
  ]
};
<ag-charts-vue :options="options"></ag-charts-vue>