Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Angular Charts: API 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
Bar
Line
Scatter
Area
Pie
Histogram

Options

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

Type of chart to render. Inherited from the first declared series if unspecified.
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'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).
countnumber
Default: N/A

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.
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.
position'top' | 'right' | 'bottom' | 'left'
Default: N/A

The position on the chart where the axis should be rendered.
top
right
bottom
left
enabledboolean
Default: true

Whether or not the title should be shown.
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
textstring
Default: 'Title'

The text to show in the title.
fontStyle'normal' | 'italic' | 'oblique'
Default: 'normal'

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: '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
colorstring
Default: '#000000'

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

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

function (params: AgAxisLabelFormatterParams) => string;

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

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

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.
xKeystring
Required

The key to use to retrieve x-values from the data.
yKeystring
Default: N/A

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

function (params: { value: number; }) => string;
Function used to turn 'yKey' values into text to be displayed by a label. By default the values are simply stringified.
placement'inside' | 'outside'
Default: N/A

Where to render series labels relative to the segments.
inside
outside
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: AgCartesianSeriesTooltipRendererParams) => string | AgTooltipRendererResult;

interface AgCartesianSeriesTooltipRendererParams {
  xKey: string;
  xValue: any;
  xName: string;
  yKey: string;
  yValue: any;
  yName: string;
  datum: any;
  title: string;
  color: 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
formatterFunction
Default: N/A

function (params: AgBarSeriesFormatterParams) => AgBarSeriesFormat;

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

interface AgBarSeriesFormatterParams {
  datum: any;
  fill: string;
  stroke: string;
  strokeWidth: number;
  highlighted: boolean;
  xKey: string;
  yKey: 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.
dataany[]
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.
listenersAgBaseSeriesListeners | {[key: string]: Function}
Default: N/A

A map of event names to event listeners.
fillstring
Default: N/A

The fill colour of a marker when tapped or hovered over. Use undefined for no highlight.
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
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
visibleboolean
Default: true

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

Colour of the chart background.
enabledboolean
Default: true

Whether or not the title should be shown.
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
textstring
Default: 'Title'

The text to show in the title.
fontStyle'normal' | 'italic' | 'oblique'
Default: 'normal'

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: '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
colorstring
Default: '#000000'

The colour to use for the title.
enabledboolean
Default: true

Whether or not the title should be shown.
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
textstring
Default: 'Title'

The text to show in the title.
fontStyle'normal' | 'italic' | 'oblique'
Default: 'normal'

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: '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
colorstring
Default: '#000000'

The colour to use for the title.
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.
trackingboolean
Default: true

If true, for series with markers the tooltip will be shown to the closest marker.
false
true
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
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
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 (id: string, itemId: any, value: string) => 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.
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
seriesNodeClickFunction
Required

function (type: 'seriesNodeClick', series: any, datum: any, xKey: string, yKey: string) => any;
The listener to call when a node (marker, column, bar, tile or a pie slice) 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.
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-angular [options]="options">
</ag-charts-angular>