Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

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.

Options

type

  • Type'line' | 'bar' | 'column' | 'area' | 'scatter' | 'histogram' | TAddonType
If specified overrides the default series type.

data

  • Typeany[]
  • Requiredtrue
The data to render the chart from. If this is not specified, it must be set on individual series instead.

container

  • TypeHTMLElement | null
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).
X-axis (category).

axes[0].type

  • Type'category'
  • Requiredtrue
Axis type identifier.

axes[0].paddingInner

  • Typenumber
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

axes[0].paddingOuter

  • Typenumber
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

axes[0].groupPaddingInner

  • Typenumber
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
Configuration for the axis ticks.

axes[0].tick.enabled

  • Typeboolean
Set to false to hide the axis tick lines.

axes[0].tick.width

  • Typenumber
The width in pixels of the axis ticks (and corresponding grid line).  px

axes[0].tick.size

  • Typenumber
The length in pixels of the axis ticks.  px

axes[0].tick.color

  • Typestring
The colour of the axis ticks.

axes[0].tick.values

  • Typeany[]
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.

axes[0].tick.minSpacing

  • Typenumber
Minimum gap in pixels between tick lines.

axes[0].position

  • Type'top' | 'bottom'
The position on the chart where the axis should be rendered.
Add cross lines or regions corresponding to data values.

axes[0].crossLines.enabled

  • Typeboolean
Whether or not to show the cross line.

axes[0].crossLines.type

  • Type'line' | 'range'
  • Requiredtrue
Type of cross line to render.

axes[0].crossLines.value

  • Typeany
The data value at which the line should be positioned. This property is used if the crossLine type is line.

axes[0].crossLines.range

  • Type[DataValue, DataValue]
The range of values from the data used to display lines at a desired chart region. This property is only used for crossLine type range.

axes[0].crossLines.fill

  • Typestring
The colour to use for the fill of the range.

axes[0].crossLines.fillOpacity

  • Typenumber
The opacity of the fill for the range.

axes[0].crossLines.stroke

  • Typestring
The colour of the stroke for the lines.

axes[0].crossLines.strokeWidth

  • Typenumber
The width in pixels of the stroke for the lines.  px

axes[0].crossLines.strokeOpacity

  • Typenumber
The opacity of the stroke for the lines.

axes[0].crossLines.lineDash

  • TypePixelSize[]
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.
Configuration for the crossLine label.

axes[0].crossLines.label.enabled

  • Typeboolean
Whether or not to show the cross line label.

axes[0].crossLines.label.text

  • Typestring
The text to show in the label.

axes[0].crossLines.label.fontStyle

  • Type'normal' | 'italic' | 'oblique'
The font style to use for the label.

axes[0].crossLines.label.fontWeight

  • Type'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
The font weight to use for the label.

axes[0].crossLines.label.fontSize

  • Typenumber
The font size in pixels to use for the label.  px

axes[0].crossLines.label.fontFamily

  • Typestring
The font family to use for the label.

axes[0].crossLines.label.padding

  • Typenumber
Padding in pixels between the label and the edge of the crossLine.  px

axes[0].crossLines.label.color

  • Typestring
The colour to use for the label.

axes[0].crossLines.label.position

  • Type'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'inside' | 'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom' | 'insideTopLeft' | 'insideBottomLeft' | 'insideTopRight' | 'insideBottomRight'
The position of the crossLine label.

axes[0].crossLines.label.rotation

  • Typenumber
The rotation of the crossLine label in degrees.

axes[0].thickness

  • Typenumber
If set to a non-zero value, the axis will have the specified thickness regardless of label size.  px
Configuration for the title shown next to the axis.

axes[0].title.enabled

  • Typeboolean
Whether or not the title should be shown.

axes[0].title.text

  • Typestring
The text to show in the title.

axes[0].title.fontStyle

  • Type'normal' | 'italic' | 'oblique'
The font style to use for the title.

axes[0].title.fontWeight

  • Type'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
The font weight to use for the title.

axes[0].title.fontSize

  • Typenumber
The font size in pixels to use for the title.  px

axes[0].title.fontFamily

  • Typestring
The font family to use for the title.

axes[0].title.color

  • Typestring
The colour to use for the title.

axes[0].title.formatter

  • TypeFunction
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

  • Typestring[]
Configuration for the axis line.

axes[0].line.width

  • Typenumber
  • Default1
The width in pixels of the axis line.  px

axes[0].line.color

  • Typestring
  • Default'rgba(195, 195, 195, 1)'
The colour of the axis line.
Configuration for the axis labels, shown next to the ticks.

axes[0].label.enabled

  • Typeboolean
Set to false to hide the axis labels.

axes[0].label.fontStyle

  • Type'normal' | 'italic' | 'oblique'
  • Default'normal'
The font style to use for the labels.

axes[0].label.fontWeight

  • Type'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
  • Default'normal'
The font weight to use for the labels.

axes[0].label.fontSize

  • Typenumber
  • Default12
The font size in pixels to use for the labels.  px

axes[0].label.fontFamily

  • Typestring
  • Default'Verdana, sans-serif'
The font family to use for the labels

axes[0].label.padding

  • Typenumber
  • Default5
Padding in pixels between the axis label and the tick.  px

axes[0].label.color

  • Typestring
  • Default'#000000'
The colour to use for the labels

axes[0].label.rotation

  • Typenumber
  • Default0
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.  °

axes[0].label.autoRotate

  • Typeboolean
  • Defaultfalse
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.

axes[0].label.autoRotateAngle

  • Typenumber
  • Default335
If autoRotate is enabled, specifies the rotation angle to use when autoRotate is activated. Defaults to an angle of 335 degrees if unspecified.  °

axes[0].label.avoidCollisions

  • Typeboolean
Avoid axis label collision by automatically reducing the number of ticks displayed. If set to false, axis labels may collide.

axes[0].label.minSpacing

  • Typenumber
Minimum gap in pixels between the axis labels before being removed to avoid collisions.  px

axes[0].label.format

  • Typestring
Format string used when rendering labels.

axes[0].label.formatter

  • TypeFunction
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
Configuration of the lines used to form the grid in the chart area.

axes[0].gridStyle.stroke

  • Typestring
  • Default'rgba(195, 195, 195, 1)'
The colour of the grid line.

axes[0].gridStyle.lineDash

  • TypePixelSize[]
  • 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.
Y-axis (numeric).

axes[1].type

  • Type'number'
  • Requiredtrue
Axis type identifier.

axes[1].nice

  • Typeboolean
  • Defaulttrue
If 'true', the range will be rounded up to ensure nice equal spacing between the ticks.

axes[1].min

  • Typenumber
User override for the automatically determined min value (based on series data).

axes[1].max

  • Typenumber
User override for the automatically determined max value (based on series data).
Configuration for the axis ticks.

axes[1].tick.maxSpacing

  • Typenumber
Maximum gap in pixels between tick lines.

axes[1].tick.interval

  • Typenumber
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.

axes[1].tick.enabled

  • Typeboolean
Set to false to hide the axis tick lines.

axes[1].tick.width

  • Typenumber
  • Default1
The width in pixels of the axis ticks (and corresponding grid line).  px

axes[1].tick.size

  • Typenumber
  • Default6
The length in pixels of the axis ticks.  px

axes[1].tick.color

  • Typestring
  • Default'rgba(195, 195, 195, 1)'
The colour of the axis ticks.

axes[1].tick.values

  • Typeany[]
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.

axes[1].tick.minSpacing

  • Typenumber
Minimum gap in pixels between tick lines.

axes[1].position

  • Type'left' | 'right'
The position on the chart where the axis should be rendered.
Add cross lines or regions corresponding to data values.

axes[1].crossLines.enabled

  • Typeboolean
Whether or not to show the cross line.

axes[1].crossLines.type

  • Type'line' | 'range'
  • Requiredtrue
Type of cross line to render.

axes[1].crossLines.value

  • Typeany
The data value at which the line should be positioned. This property is used if the crossLine type is line.

axes[1].crossLines.range

  • Type[DataValue, DataValue]
The range of values from the data used to display lines at a desired chart region. This property is only used for crossLine type range.

axes[1].crossLines.fill

  • Typestring
The colour to use for the fill of the range.

axes[1].crossLines.fillOpacity

  • Typenumber
The opacity of the fill for the range.

axes[1].crossLines.stroke

  • Typestring
The colour of the stroke for the lines.

axes[1].crossLines.strokeWidth

  • Typenumber
The width in pixels of the stroke for the lines.  px

axes[1].crossLines.strokeOpacity

  • Typenumber
The opacity of the stroke for the lines.

axes[1].crossLines.lineDash

  • TypePixelSize[]
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.
Configuration for the crossLine label.

axes[1].crossLines.label.enabled

  • Typeboolean
Whether or not to show the cross line label.

axes[1].crossLines.label.text

  • Typestring
The text to show in the label.

axes[1].crossLines.label.fontStyle

  • Type'normal' | 'italic' | 'oblique'
The font style to use for the label.

axes[1].crossLines.label.fontWeight

  • Type'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
The font weight to use for the label.

axes[1].crossLines.label.fontSize

  • Typenumber
The font size in pixels to use for the label.  px

axes[1].crossLines.label.fontFamily

  • Typestring
The font family to use for the label.

axes[1].crossLines.label.padding

  • Typenumber
Padding in pixels between the label and the edge of the crossLine.  px

axes[1].crossLines.label.color

  • Typestring
The colour to use for the label.

axes[1].crossLines.label.position

  • Type'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'inside' | 'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom' | 'insideTopLeft' | 'insideBottomLeft' | 'insideTopRight' | 'insideBottomRight'
The position of the crossLine label.

axes[1].crossLines.label.rotation

  • Typenumber
The rotation of the crossLine label in degrees.

axes[1].thickness

  • Typenumber
If set to a non-zero value, the axis will have the specified thickness regardless of label size.  px
Configuration for the title shown next to the axis.

axes[1].title.enabled

  • Typeboolean
Whether or not the title should be shown.

axes[1].title.text

  • Typestring
The text to show in the title.

axes[1].title.fontStyle

  • Type'normal' | 'italic' | 'oblique'
The font style to use for the title.

axes[1].title.fontWeight

  • Type'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
The font weight to use for the title.

axes[1].title.fontSize

  • Typenumber
The font size in pixels to use for the title.  px

axes[1].title.fontFamily

  • Typestring
The font family to use for the title.

axes[1].title.color

  • Typestring
The colour to use for the title.

axes[1].title.formatter

  • TypeFunction
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

  • Typestring[]
Configuration for the axis line.

axes[1].line.width

  • Typenumber
  • Default1
The width in pixels of the axis line.  px

axes[1].line.color

  • Typestring
  • Default'rgba(195, 195, 195, 1)'
The colour of the axis line.
Configuration for the axis labels, shown next to the ticks.

axes[1].label.enabled

  • Typeboolean
Set to false to hide the axis labels.

axes[1].label.fontStyle

  • Type'normal' | 'italic' | 'oblique'
  • Default'normal'
The font style to use for the labels.

axes[1].label.fontWeight

  • Type'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
  • Default'normal'
The font weight to use for the labels.

axes[1].label.fontSize

  • Typenumber
  • Default12
The font size in pixels to use for the labels.  px

axes[1].label.fontFamily

  • Typestring
  • Default'Verdana, sans-serif'
The font family to use for the labels

axes[1].label.padding

  • Typenumber
  • Default5
Padding in pixels between the axis label and the tick.  px

axes[1].label.color

  • Typestring
  • Default'#000000'
The colour to use for the labels

axes[1].label.rotation

  • Typenumber
  • Default0
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.  °

axes[1].label.autoRotate

  • Typeboolean
  • Defaultfalse
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.

axes[1].label.autoRotateAngle

  • Typenumber
  • Default335
If autoRotate is enabled, specifies the rotation angle to use when autoRotate is activated. Defaults to an angle of 335 degrees if unspecified.  °

axes[1].label.avoidCollisions

  • Typeboolean
Avoid axis label collision by automatically reducing the number of ticks displayed. If set to false, axis labels may collide.

axes[1].label.minSpacing

  • Typenumber
Minimum gap in pixels between the axis labels before being removed to avoid collisions.  px

axes[1].label.format

  • Typestring
Format string used when rendering labels.

axes[1].label.formatter

  • TypeFunction
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
Configuration of the lines used to form the grid in the chart area.

axes[1].gridStyle.stroke

  • Typestring
  • Default'rgba(195, 195, 195, 1)'
The colour of the grid line.

axes[1].gridStyle.lineDash

  • TypePixelSize[]
  • 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.
Series configurations.

series.type

  • Type'column'

series.grouped

  • Typeboolean
  • Defaultfalse
Whether to group together (adjacently) separate columns.

series.stacked

  • Typeboolean
An option indicating if the columns should be stacked.

series.stackGroup

  • Typestring
An ID to be used to group stacked items.

series.normalizedTo

  • Typenumber
The number to normalise the column stacks to. Has no effect when 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

  • Typestring
  • Requiredtrue
The key to use to retrieve x-values from the data.

series.yKey

  • Typestring
  • Requiredtrue
The key to use to retrieve y-values from the data.

series.xName

  • Typestring
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.

series.yName

  • Typestring
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.

series.legendItemName

  • Typestring
Human-readable description of the y-values. If supplied, matching items with the same value will be toggled together.

series.fill

  • Typestring
The colour to use for the fill of the columns.

series.stroke

  • Typestring
The colours to use for the stroke of the columns.

series.strokeWidth

  • Typenumber
  • Default1
The width in pixels of the stroke for the columns.  px

series.fillOpacity

  • Typenumber
  • Default1
The opacity of the fill for the columns.

series.strokeOpacity

  • Typenumber
  • Default1
The opacity of the stroke for the columns.

series.lineDash

  • TypePixelSize[]
Defines how the 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.

series.lineDashOffset

  • Typenumber
  • Default0
The initial offset of the dashed line in pixels.  px
Configuration for the shadow used behind the chart series.

series.shadow.enabled

  • Typeboolean
Whether or not the shadow is visible.

series.shadow.color

  • Typestring
The colour of the shadow.

series.shadow.xOffset

  • Typenumber
The horizontal offset in pixels for the shadow.  px

series.shadow.yOffset

  • Typenumber
The vertical offset in pixels for the shadow.  px

series.shadow.blur

  • Typenumber
The radius of the shadow's blur, given in pixels.  px
Configuration for the labels shown on columns.

series.label.placement

  • Type'inside' | 'outside'
Where to render series labels relative to the segments.

series.label.formatter

  • TypeFunction
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

  • Typeboolean
Whether or not the labels should be shown.

series.label.fontStyle

  • Type'normal' | 'italic' | 'oblique'
The font style to use for the labels.

series.label.fontWeight

  • Type'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
The font weight to use for the labels.

series.label.fontSize

  • Typenumber
The font size in pixels to use for the labels.  px

series.label.fontFamily

  • Typestring
The font family to use for the labels.

series.label.color

  • Typestring
The colour to use for the labels.
Series-specific tooltip configuration.

series.tooltip.renderer

  • TypeFunction
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

  • Typeboolean
Whether or not to show tooltips when the series are hovered over.

series.tooltip.showArrow

  • Typeboolean
The tooltip arrow is displayed by default, unless the container restricts it or a position offset is provided. To always display the arrow, set showArrow to true. To remove the arrow, set showArrow to false.
The position of the tooltip.

series.tooltip.position.type

  • Type'pointer' | 'node'
  • Requiredtrue
The type of positioning for the tooltip. By default, the tooltip follows the mouse pointer for series without markers, and it is anchored to the highlighted marker node for series with markers.

series.tooltip.position.xOffset

  • Typenumber
The horizontal offset in pixels for the position of the tooltip.  px

series.tooltip.position.yOffset

  • Typenumber
The vertical offset in pixels for the position of the tooltip.  px
Configuration for tooltip interaction.

series.tooltip.interaction.enabled

  • Typeboolean
  • Requiredtrue
Set to true to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text

series.formatter

  • TypeFunction
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.
A map of event names to event listeners.

series.listeners.nodeClick

  • TypeFunction
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

  • TypeFunction
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

  • Typestring
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

series.data

  • TypeDatumType[]
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.

series.visible

  • Typeboolean
Whether or not to display the series.

series.showInLegend

  • Typeboolean
Whether or not to include the series in the legend.

series.cursor

  • Typestring
The cursor to use for hovered area markers. This config is identical to the CSS cursor property.
Configuration for series markers and series line highlighting when a marker / data point or a legend item is hovered over.
Highlight style used for an individual marker when tapped or hovered over.

series.highlightStyle.item.fill

  • Typestring
The fill colour of a marker when tapped or hovered over. Use undefined for no highlight.

series.highlightStyle.item.fillOpacity

  • Typenumber
The opacity of the fill for the highlighted item.

series.highlightStyle.item.stroke

  • Typestring
The stroke colour of a marker when tapped or hovered over. Use undefined for no highlight.

series.highlightStyle.item.strokeWidth

  • Typenumber
The stroke width of a marker when tapped or hovered over. Use undefined for no highlight.  px
Highlight style used for whole series when one of its markers is tapped or hovered over.

series.highlightStyle.series.enabled

  • Typeboolean

series.highlightStyle.series.dimOpacity

  • Typenumber
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.

series.highlightStyle.series.strokeWidth

  • Typenumber
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

series.nodeClickRange

  • TypePixelSize | 'exact' | 'nearest'
Range from a node a click triggers the listener.
Configuration for the chart legend.

legend.enabled

  • Typeboolean
Whether or not to show the legend. By default, the chart displays a legend when there is more than one series present.

legend.position

  • Type'top' | 'right' | 'bottom' | 'left'
  • Default'bottom'
Where the legend should show in relation to the chart.

legend.orientation

  • Type'horizontal' | 'vertical'
How the legend items should be arranged.

legend.maxWidth

  • Typenumber
Used to constrain the width of the legend.  px

legend.maxHeight

  • Typenumber
Used to constrain the height of the legend.  px

legend.spacing

  • Typenumber
  • Default20
The spacing in pixels to use outside the legend.  px
Configuration for the legend items that consist of a marker and a label.
Configuration for the legend markers.

legend.item.marker.size

  • Typenumber
  • Default15
The size in pixels of the markers in the legend.  px

legend.item.marker.shape

  • Type'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.

legend.item.marker.padding

  • Typenumber
  • Default8
The padding in pixels between a legend marker and the corresponding label.  px

legend.item.marker.strokeWidth

  • Typenumber
  • Default1
The width in pixels of the stroke for markers in the legend.  px
Configuration for the legend labels.

legend.item.label.maxLength

  • Typenumber
If the label text exceeds the maximum length, it will be truncated and an ellipsis will be appended to indicate this.

legend.item.label.color

  • Typestring
  • Default'black'
The colour of the text.

legend.item.label.fontStyle

  • Type'normal' | 'italic' | 'oblique'
  • Default'normal'
The font style to use for the legend.

legend.item.label.fontWeight

  • Type'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
  • Default'normal'
The font weight to use for the legend.

legend.item.label.fontSize

  • Typenumber
  • Default12
The font size in pixels to use for the legend.  px

legend.item.label.fontFamily

  • Typestring
  • Default'Verdana, sans-serif'
The font family to use for the legend.

legend.item.label.formatter

  • TypeFunction
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

  • Typenumber
Used to constrain the width of legend items.  px

legend.item.paddingX

  • Typenumber
  • Default16
The horizontal spacing in pixels to use between legend items.  px

legend.item.paddingY

  • Typenumber
  • Default8
The vertical spacing in pixels to use between legend items.  px

legend.item.toggleSeriesVisible

  • Typeboolean
Set to false to turn off toggling of the series visibility in the chart when the legend item is clicked.

legend.reverseOrder

  • Typeboolean
Reverse the display order of legend items if true.
Optional callbacks for specific legend-related events.

legend.listeners.legendItemClick

  • TypeFunction
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

  • TypeFunction
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.
Configuration for the pagination markers.

legend.pagination.marker.size

  • Typenumber
The size in pixels of the pagination buttons.  px

legend.pagination.marker.shape

  • Type'circle' | 'cross' | 'diamond' | 'heart' | 'plus' | 'triangle' | any
If set, overrides the marker shape for the pagination buttons. If not set, the pagination buttons will default to the 'triangle' marker shape.

legend.pagination.marker.padding

  • Typenumber
The inner padding in pixels between a pagination button and the pagination label.  px
Configuration for pagination buttons when a button is active.

legend.pagination.activeStyle.fill

  • Typestring
The fill colour to use for the pagination button markers.

legend.pagination.activeStyle.fillOpacity

  • Typenumber
Opacity of the pagination buttons.

legend.pagination.activeStyle.stroke

  • Typestring
The colour to use for the button strokes.

legend.pagination.activeStyle.strokeWidth

  • Typenumber
The width in pixels of the button strokes.  px

legend.pagination.activeStyle.strokeOpacity

  • Typenumber
Opacity of the button strokes.
Configuration for pagination buttons when a button is inactive.

legend.pagination.inactiveStyle.fill

  • Typestring
The fill colour to use for the pagination button markers.

legend.pagination.inactiveStyle.fillOpacity

  • Typenumber
Opacity of the pagination buttons.

legend.pagination.inactiveStyle.stroke

  • Typestring
The colour to use for the button strokes.

legend.pagination.inactiveStyle.strokeWidth

  • Typenumber
The width in pixels of the button strokes.  px

legend.pagination.inactiveStyle.strokeOpacity

  • Typenumber
Opacity of the button strokes.
Configuration for pagination buttons when a button is hovered over.

legend.pagination.highlightStyle.fill

  • Typestring
The fill colour to use for the pagination button markers.

legend.pagination.highlightStyle.fillOpacity

  • Typenumber
Opacity of the pagination buttons.

legend.pagination.highlightStyle.stroke

  • Typestring
The colour to use for the button strokes.

legend.pagination.highlightStyle.strokeWidth

  • Typenumber
The width in pixels of the button strokes.  px

legend.pagination.highlightStyle.strokeOpacity

  • Typenumber
Opacity of the button strokes.
Configuration for the pagination label.

legend.pagination.label.color

  • Typestring
The colour of the text.

legend.pagination.label.fontStyle

  • Type'normal' | 'italic' | 'oblique'
The font style to use for the pagination label.

legend.pagination.label.fontWeight

  • Type'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
The font weight to use for the pagination label.

legend.pagination.label.fontSize

  • Typenumber
The font size in pixels to use for the pagination label.  px

legend.pagination.label.fontFamily

  • Typestring
The font family to use for the pagination label.

width

  • Typenumber
The width of the chart in pixels.  px

height

  • Typenumber
The height of the chart in pixels.  px

autoSize

  • Typeboolean
  • Defaulttrue
By default, the chart will resize automatically to fill the container element. Set this to 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.
Configuration for the padding shown around the chart.

padding.top

  • Typenumber
  • Default20
The number of pixels of padding at the top of the chart area.  px

padding.right

  • Typenumber
  • Default20
The number of pixels of padding at the right of the chart area.  px

padding.bottom

  • Typenumber
  • Default20
The number of pixels of padding at the bottom of the chart area.  px

padding.left

  • Typenumber
  • Default20
The number of pixels of padding at the left of the chart area.  px
Configuration for the padding around the series area.

seriesAreaPadding.top

  • Typenumber
  • Default0
The number of pixels of padding at the top of the series area.  px

seriesAreaPadding.right

  • Typenumber
  • Default0
The number of pixels of padding at the right of the series area.  px

seriesAreaPadding.bottom

  • Typenumber
  • Default0
The number of pixels of padding at the bottom of the series area.  px

seriesAreaPadding.left

  • Typenumber
  • Default0
The number of pixels of padding at the left of the series area.  px
Configuration for the background shown behind the chart.

background.visible

  • Typeboolean
  • Defaulttrue
Whether or not the background should be visible.

background.fill

  • Typestring
  • Default'#FFFFFF'
Colour of the chart background.
Configuration for the title shown at the top of the chart.

title.enabled

  • Typeboolean
  • Defaultfalse
Whether or not the text should be shown.

title.text

  • Typestring
  • Default'Title'
The text to display.

title.fontStyle

  • Type'normal' | 'italic' | 'oblique'
  • Default'normal'
The font style to use for the text.

title.fontWeight

  • Type'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
  • Default'bold'
The font weight to use for the text.

title.fontSize

  • Typenumber
  • Default18
The font size in pixels to use for the text.  px

title.fontFamily

  • Typestring
  • Default'Verdana, sans-serif'
The font family to use for the text.

title.color

  • Typestring
  • Default'#000000'
The colour to use for the text.

title.spacing

  • Typenumber
Spacing added to help position the text.

title.maxWidth

  • Typenumber
Used to constrain the width of the title.  px

title.maxHeight

  • Typenumber
Used to constrain the height of the title.  px

title.wrapping

  • Type'never' | 'always' | 'hyphenate' | 'on-space'
  • Default'hyphenate'
Text wrapping strategy for long text. '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.
Configuration for the subtitle shown beneath the chart title. Note: a subtitle will only be shown if a title is also present.

subtitle.enabled

  • Typeboolean
  • Defaultfalse
Whether or not the text should be shown.

subtitle.text

  • Typestring
  • Default'Subtitle'
The text to display.

subtitle.fontStyle

  • Type'normal' | 'italic' | 'oblique'
  • Default'normal'
The font style to use for the text.

subtitle.fontWeight

  • Type'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
  • Default'bold'
The font weight to use for the text.

subtitle.fontSize

  • Typenumber
  • Default18
The font size in pixels to use for the text.  px

subtitle.fontFamily

  • Typestring
  • Default'Verdana, sans-serif'
The font family to use for the text.

subtitle.color

  • Typestring
  • Default'#000000'
The colour to use for the text.

subtitle.spacing

  • Typenumber
Spacing added to help position the text.

subtitle.maxWidth

  • Typenumber
Used to constrain the width of the title.  px

subtitle.maxHeight

  • Typenumber
Used to constrain the height of the title.  px

subtitle.wrapping

  • Type'never' | 'always' | 'hyphenate' | 'on-space'
  • Default'hyphenate'
Text wrapping strategy for long text. '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.
Configuration for the footnote shown at the bottom of the chart.

footnote.enabled

  • Typeboolean
  • Defaultfalse
Whether or not the text should be shown.

footnote.text

  • Typestring
  • Default'Footer'
The text to display.

footnote.fontStyle

  • Type'normal' | 'italic' | 'oblique'
  • Default'normal'
The font style to use for the text.

footnote.fontWeight

  • Type'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
  • Default'bold'
The font weight to use for the text.

footnote.fontSize

  • Typenumber
  • Default18
The font size in pixels to use for the text.  px

footnote.fontFamily

  • Typestring
  • Default'Verdana, sans-serif'
The font family to use for the text.

footnote.color

  • Typestring
  • Default'#000000'
The colour to use for the text.

footnote.spacing

  • Typenumber
Spacing added to help position the text.

footnote.maxWidth

  • Typenumber
Used to constrain the width of the title.  px

footnote.maxHeight

  • Typenumber
Used to constrain the height of the title.  px

footnote.wrapping

  • Type'never' | 'always' | 'hyphenate' | 'on-space'
  • Default'hyphenate'
Text wrapping strategy for long text. '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.
Global configuration that applies to all tooltips in the chart.

tooltip.enabled

  • Typeboolean
  • Defaulttrue
Set to false to disable tooltips for all series in the chart.

tooltip.showArrow

  • Typeboolean
The tooltip arrow is displayed by default, unless the container restricts it or a position offset is provided. To always display the arrow, set showArrow to true. To remove the arrow, set showArrow to false.

tooltip.class

  • Typestring
A class name to be added to the tooltip element of the chart.

tooltip.range

  • TypePixelSize | 'exact' | 'nearest'
  • Default'nearest'
Range from a point that triggers the tooltip to show.
The position of the tooltip.

tooltip.position.type

  • Type'pointer' | 'node'
  • Requiredtrue
The type of positioning for the tooltip. By default, the tooltip follows the mouse pointer for series without markers, and it is anchored to the highlighted marker node for series with markers.

tooltip.position.xOffset

  • Typenumber
The horizontal offset in pixels for the position of the tooltip.  px

tooltip.position.yOffset

  • Typenumber
The vertical offset in pixels for the position of the tooltip.  px

tooltip.delay

  • Typenumber
  • Default0
The time interval (in milliseconds) after which the tooltip is shown.  ms
A map of event names to event listeners.

listeners.seriesNodeClick

  • TypeFunction
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

  • TypeFunction
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

  • TypeFunction
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

  • TypeFunction
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.
Configuration for the chart highlighting.

highlight.range

  • Type'tooltip' | 'node'
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.
HTML overlays
An overlay to be displayed when there is no data.

overlays.noData.text

  • Typestring
  • Default'No data to display'
Text to render in the overlay.

overlays.noData.renderer

  • TypeFunction
function () => string;
A function for generating HTML string for overlay content.
Configuration for the chart navigator.

navigator.enabled

  • Typeboolean
  • Defaultfalse
Whether or not to show the navigator.

navigator.height

  • Typenumber
  • Default30
The height of the navigator.  px

navigator.margin

  • Typenumber
  • Default10
The distance between the navigator and the bottom axis.  px

navigator.min

  • Typenumber
  • Default0
The start of the visible range in the [0, 1] interval.

navigator.max

  • Typenumber
  • Default1
The end of the visible range in the [0, 1] interval.
Configuration for the navigator's visible range mask.

navigator.mask.fill

  • Typestring
  • Default'#999999'
The fill colour used by the mask.

navigator.mask.stroke

  • Typestring
  • Default'#999999'
The stroke colour used by the mask.

navigator.mask.strokeWidth

  • Typenumber
  • Default1
The stroke width used by the mask.  px

navigator.mask.fillOpacity

  • Typenumber
  • Default0.2
The opacity of the mask's fill in the [0, 1] interval, where 0 is effectively no masking.
Configuration for the navigator's left handle.

navigator.minHandle.fill

  • Typestring
  • Default'#f2f2f2'
The fill colour used by the handle.

navigator.minHandle.stroke

  • Typestring
  • Default'#999999'
The stroke colour used by the handle.

navigator.minHandle.strokeWidth

  • Typenumber
  • Default1
The stroke width used by the handle.  px

navigator.minHandle.width

  • Typenumber
  • Default8
The width of the handle.  px

navigator.minHandle.height

  • Typenumber
  • Default16
The height of the handle.  px

navigator.minHandle.gripLineGap

  • Typenumber
  • Default2
The distance between the handle's grip lines.  px

navigator.minHandle.gripLineLength

  • Typenumber
  • Default8
The length of the handle's grip lines.  px
Configuration for the navigator's right handle.

navigator.maxHandle.fill

  • Typestring
  • Default'#f2f2f2'
The fill colour used by the handle.

navigator.maxHandle.stroke

  • Typestring
  • Default'#999999'
The stroke colour used by the handle.

navigator.maxHandle.strokeWidth

  • Typenumber
  • Default1
The stroke width used by the handle.  px

navigator.maxHandle.width

  • Typenumber
  • Default8
The width of the handle.  px

navigator.maxHandle.height

  • Typenumber
  • Default16
The height of the handle.  px

navigator.maxHandle.gripLineGap

  • Typenumber
  • Default2
The distance between the handle's grip lines.  px

navigator.maxHandle.gripLineLength

  • Typenumber
  • Default8
The length of the handle's grip lines.  px

theme

  • Typestring | AgChartTheme
  • Default'ag-default'
Theme to use for rendering of the chart. Specify an inbuilt theme name, or provide an AgChartTheme instance to customise. 
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>