AG Grid
Results:
Loading...
Framework:Javascript GridAngular GridReact GridVue Grid

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
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.
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.
fillstring
Default: '#FFFFFF'

Colour of the chart background.
visibleboolean
Default: true

Whether or not the background should be visible.
false
true
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
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
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
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
gripLineLengthnumber
Default: 8

The length of the handle's grip lines.
 px
gripLineGapnumber
Default: 2

The distance between 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
gripLineLengthnumber
Default: 8

The length of the handle's grip lines.
 px
gripLineGapnumber
Default: 2

The distance between the handle's grip lines.
 px
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.
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
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.
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.
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.
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.
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
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
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.
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
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.
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'];