JavaScript Charts: API Explorer

Bar

Line

Scatter

Area

Pie

Histogram

Options

Search:

dataobject[]

Required

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

containerHTMLElement

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

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

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

tooltipObject❯
Global configuration that applies to all tooltips in the chart.

enabledboolean

Default: true

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

false

true

trackingboolean

Default: true

If true, for series with markers the tooltip will be shown to the closest marker.

false

true

classstring

Default: N/A

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

paddingObject❯
Configuration for the padding shown around the chart.

topnumber

Default: 20

The number of pixels of padding at the top of the chart area.

rightnumber

Default: 20

The number of pixels of padding at the right of the chart area.

bottomnumber

Default: 20

The number of pixels of padding at the bottom of the chart area.

leftnumber

Default: 20

The number of pixels of padding at the left of the chart area.

backgroundObject❯
Configuration for the background shown behind the chart.

fillstring

Default: '#FFFFFF'

Colour of the chart background.

visibleboolean

Default: true

Whether or not the background should be visible.

false

true

titleObject❯
Configuration for the title shown at the top of the chart.

enabledboolean

Default: true

Whether or not the title should be shown.

false

true

textstring

Default: 'Title'

The text to show in the title.

colorstring

Default: '#000000'

The colour to use for the title.

fontStylestring

Default: 'normal'

The font style to use for the title.

normal

italic

oblique

fontWeightstring

Default: 'bold'

The font weight to use for the title.

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 title.
px

fontFamilystring

Default: 'Verdana, sans-serif'

The font family to use for the title.

Verdana, sans-serif

Arial, sans-serif

Times New Roman, serif

subtitleObject❯
Configuration for the subtitle shown beneath the chart title. Note: a subtitle will only be shown if a title is also present.

enabledboolean

Default: true

Whether or not the subtitle should be shown.

false

true

textstring

Default: 'Subtitle'

The text to show in the subtitle.

colorstring

Default: '#000000'

The colour to use for the subtitle.

fontStylestring

Default: 'normal'

The font style to use for the subtitle.

normal

italic

oblique

fontWeightstring

Default: 'normal'

The font weight to use for the subtitle.

normal

bold

bolder

lighter

100

200

300

400

500

600

700

800

900

fontSizenumber

Default: 14

The font size in pixels to use for the subtitle.
px

fontFamilystring

Default: 'Verdana, sans-serif'

The font family to use for the subtitle.

Verdana, sans-serif

Arial, sans-serif

Times New Roman, serif

legendObject❯
Configuration for the chart legend.

enabledboolean

Default: true

Whether or not to show the legend.

false

true

positionstring

Default: 'right'

Where the legend should show in relation to the chart.

top

right

bottom

left

spacingnumber

Default: 20

The spacing in pixels to use outside the legend.
px

layoutHorizontalSpacingnumber

Default: 16

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

layoutVerticalSpacingnumber

Default: 8

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

itemSpacingnumber

Default: 8

The spacing in pixels between a legend marker and the corresponding label.
px

markerShapestring

Default: N/A

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

plus

square

triangle

markerSizenumber

Default: 15

The size in pixels of the markers in the legend.
px

strokeWidthnumber

Default: 1

The width in pixels of the stroke for markers in the legend.
px

colorstring

Default: 'black'

The colour of the text.

fontStylestring

Default: 'normal'

The font style to use for the legend.

normal

italic

oblique

fontWeightstring

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

navigatorObject❯
Configuration for the chart navigator. This config is only supported by cartesian charts.

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.

maskObject❯
Configuration for the navigator's visible range mask.

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.

minHandleObject❯
Configuration for the navigator's left handle.

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

gripLineLengthnumber

Default: 8

The length of the handle's grip lines.
px

gripLineGapnumber

Default: 2

The distance between the handle's grip lines.
px

maxHandleObject❯
Configuration for the navigator's right handle.

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

gripLineLengthnumber

Default: 8

The length of the handle's grip lines.
px

gripLineGapnumber

Default: 2

The distance between the handle's grip lines.
px

axesObject❯
Configuration for axes in cartesian charts.

typestring

Default: N/A

The type of the axis.
Options: 'category' | 'number' | 'time'

positionstring

Default: N/A

The position on the chart where the axis should be rendered.

top

right

bottom

left

minnumber

Default: N/A

User override for the automatically determinted min value (based on series data). Only applied to "number" axes.

maxnumber

Default: N/A

User override for the automatically determinted max value (based on series data). Only applied to "number" axes.

titleObject❯
Configuration for the title shown next to the axis.

enabledboolean

Default: true

Whether or not the axis title should be shown.

false

true

textstring

Default: 'Axis Title'

The text to show in the axis title.

colorstring

Default: '#000000'

The colour to use for the axis title.

fontStylestring

Default: 'normal'

The font style to use for the axis title.

normal

italic

oblique

fontWeightstring

Default: 'bold'

The font weight to use for the axis title.

normal

bold

bolder

lighter

100

200

300

400

500

600

700

800

900

fontSizenumber

Default: 14

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

fontFamilystring

Default: 'Verdana, sans-serif'

The font family to use for the axis title.

Verdana, sans-serif

Arial, sans-serif

Times New Roman, serif

lineObject❯
Configuration for the axis line.

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.

tickObject❯
Configuration for the axis ticks.

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.

countnumber

Default: 10

A hint of how many ticks to use across an axis. The axis is not guaranteed to use exactly this number of ticks, but will try to use a number of ticks that is close to the number given.

labelObject❯
Configuration for the axis labels, shown next to the ticks.

fontStylestring

Default: 'normal'

The font style to use for the labels.

normal

italic

oblique

fontWeightstring

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

colorstring

Default: '#000000'

The colour to use for the labels.

paddingnumber

Default: 5

Padding in pixels between the axis label and the tick.
px

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

formatstring

Default: N/A

Format string used when rendering labels for time axes. For more information on the structure of the string, click here.

formatterFunction

Default: N/A

function (params: ParamsType): string;

interface ParamsType {
  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.

gridStyleObject❯
Configuration of the lines used to form the grid in the chart area.

strokestring

Default: 'rgba(195, 195, 195, 1)'

The colour of the grid line.

lineDashnumber[]

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.

seriesObject❯
Configuration for bar/column series.

xKeystring

Required

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

xNamestring

Default: N/A

A human-readable description of the x-values.

yKeysstring[]

Required

The keys to use to retrieve y-values from the data.

yNamesstring[]

Default: N/A

Human-readable descriptions of the y-values.

dataobject[]

Required

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

visibleboolean

Default: true

Whether or not to display the series.

false

true

showInLegendboolean

Default: true

Whether or not to include the series in the legend.

false

true

tooltipObject❯
Series-specific tooltip configuration.

enabledboolean

Default: true

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

false

true

rendererFunction

Default: N/A

function (params: ParamsType): string;

interface ParamsType {
  datum: any;
  title?: string;
  color?: string;
  xKey: string;
  xValue: any;
  xName?: string;
  yKey: string;
  yValue: any;
  yName?: string;
}

Function used to create the content for tooltips.

groupedboolean

Default: false

Whether to show different y-values as separate bars (grouped) or not (stacked).

false

true

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.

fillsstring[]

Default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888']

The colours to cycle through for the fills of the bars.

fillOpacitynumber

Default: 1

The opacity of the fill for the bars.

strokesstring[]

Default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']

The colours to cycle through for the strokes of the bars.

strokeOpacitynumber

Default: 1

The opacity of the stroke for the bars.

strokeWidthnumber

Default: 1

The width in pixels of the stroke for the bars.
px

highlightStyleObject❯
Configuration for the highlighting used when the bars are hovered over.

fillstring

Default: 'yellow'

The fill colour of the bars when hovered over.

strokestring

Default: N/A

The colour of the stroke around the bars when hovered over.

shadowObject❯
Configuration for the shadow used behind the chart series.

enabledboolean

Default: true

Whether or not the shadow is visible.

false

true

colorstring

Default: 'rgba(0, 0, 0, 0.5)'

The colour of the shadow.

xOffsetnumber

Default: 0

The horizontal offset in pixels for the shadow.
px

yOffsetnumber

Default: 0

The vertical offset in pixels for the shadow.
px

blurnumber

Default: 5

The radius of the shadow's blur, given in pixels.
px

lineDashnumber[]

Default: []

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

labelObject❯
Configuration for the labels shown on bars.

enabledboolean

Default: true

Whether or not the labels should be shown.

false

true

colorstring

Default: 'rgba(70, 70, 70, 1)'

The colour to use for the labels.

fontStylestring

Default: 'normal'

The font style to use for the labels.

normal

italic

oblique

fontWeightstring

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

formatterFunction

Default: N/A

function (params: ParamsType): ReturnType;

interface ParamsType {
  datum: any;
  fill: string;
  stroke: string;
  strokeWidth: number;
  highlighted: boolean;
  xKey: string;
  yKey: string;
}

interface ReturnType {
  fill: string;
  stroke: string;
  strokeWidth: number;
}

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.

listenersObject❯
A map of event names to event listeners.

nodeClickFunction

Default: N/A

function (params: ParamsType): any;

interface ParamsType {
  type: 'nodeClick';
  series: BarSeries;
  datum: any;
  xKey: string;
  yKey: string;
}

The listener to call when a bar/column node is clicked.

// create new chart
chart = AgChart.create({
  series: [
    {
      type: 'column',
      xKey: 'month',
      yKeys: ['revenue', 'profit']
    }
  ]
});

// update existing chart
chart.series[0].type = 'column';
chart.series[0].xKey = 'month';
chart.series[0].yKeys = ['revenue', 'profit'];