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

Angular Charts: API Reference

This page documents the AG Charts API. You can find more details about getting started with AG Charts in the Getting Started section. You can also explore the API and see in real-time how different options affect charts using the API Explorer.

General Configuration

Configuration common to all charts.

chart: {
  data: object[];
  container?: HTMLElement;
  autoSize?: boolean; // default: true
  width?: number;
  height?: number;
  tooltip?: Tooltip;
  padding?: Padding;
  background?: Background;
  title?: Title;
  subtitle?: Subtitle;
  legend?: Legend;
  navigator?: Navigator;
}
data *
object[]
The data to render the chart from. If this is not specified, it must be set on individual series instead.
container
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).
autoSize
boolean
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.
Default: true
width
number
The width of the chart in pixels. Has no effect if autoSize is set to true.
height
number
The height of the chart in pixels. Has no effect if autoSize is set to true.
tooltip
Global configuration that applies to all tooltips in the chart.
See tooltip for more details.
padding
Configuration for the padding shown around the chart.
See padding for more details.
background
Configuration for the background shown behind the chart.
See background for more details.
title
Configuration for the title shown at the top of the chart.
See title for more details.
subtitle
Configuration for the subtitle shown beneath the chart title. Note: a subtitle will only be shown if a title is also present.
See subtitle for more details.
legend
Configuration for the chart legend.
See legend for more details.
navigator
Configuration for the chart navigator. This config is only supported by cartesian charts.
See navigator for more details.

tooltip

chart > tooltip

Global configuration that applies to all tooltips in the chart.

chart: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    tracking?: boolean; // default: true
    class?: string;
    delay?: number; // default: 0
  }
}
enabled
boolean
Set to false to disable tooltips for all series in the chart.
Default: true
tracking
boolean
If true, for series with markers the tooltip will be shown to the closest marker.
Default: true
class
string
A class name to be added to the tooltip element of the chart.
delay
number
The time interval (in milliseconds) after which the tooltip is shown.
Default: 0

padding

chart > padding

Configuration for the padding shown around the chart.

chart: {
  ...
  padding: {
    top?: number; // default: 20
    right?: number; // default: 20
    bottom?: number; // default: 20
    left?: number; // default: 20
  }
}
top
number
The number of pixels of padding at the top of the chart area.
Default: 20
right
number
The number of pixels of padding at the right of the chart area.
Default: 20
bottom
number
The number of pixels of padding at the bottom of the chart area.
Default: 20
left
number
The number of pixels of padding at the left of the chart area.
Default: 20

background

chart > background

Configuration for the background shown behind the chart.

chart: {
  ...
  background: {
    fill?: string; // default: '#FFFFFF'
    visible?: boolean; // default: true
  }
}
fill
string
Colour of the chart background.
Default: '#FFFFFF'
visible
boolean
Whether or not the background should be visible.
Default: true

title

chart > title

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

chart: {
  ...
  title: {
    enabled?: boolean; // default: true
    text?: string; // default: 'Title'
    color?: string; // default: '#000000'
    fontStyle?: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'bold'
    fontSize?: number; // default: 18
    fontFamily?: string; // default: 'Verdana, sans-serif'
  }
}
enabled
boolean
Whether or not the title should be shown.
Default: true
text
string
The text to show in the title.
Default: 'Title'
color
string
The colour to use for the title.
Default: '#000000'
fontStyle
string
The font style to use for the title.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeight
string
The font weight to use for the title.
Default: 'bold'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSize
number
The font size in pixels to use for the title.
Default: 18
fontFamily
string
The font family to use for the title.
Default: 'Verdana, sans-serif'

subtitle

chart > subtitle

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

chart: {
  ...
  subtitle: {
    enabled?: boolean; // default: true
    text?: string; // default: 'Subtitle'
    color?: string; // default: '#000000'
    fontStyle?: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
    fontSize?: number; // default: 14
    fontFamily?: string; // default: 'Verdana, sans-serif'
  }
}
enabled
boolean
Whether or not the subtitle should be shown.
Default: true
text
string
The text to show in the subtitle.
Default: 'Subtitle'
color
string
The colour to use for the subtitle.
Default: '#000000'
fontStyle
string
The font style to use for the subtitle.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeight
string
The font weight to use for the subtitle.
Default: 'normal'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSize
number
The font size in pixels to use for the subtitle.
Default: 14
fontFamily
string
The font family to use for the subtitle.
Default: 'Verdana, sans-serif'

legend

chart > legend

Configuration for the chart legend.

chart: {
  ...
  legend: {
    enabled?: boolean; // default: true
    position?: 'top' | 'right' | 'bottom' | 'left'; // default: 'right'
    spacing?: number; // default: 20
    item?: Item;
  }
}
enabled
boolean
Whether or not to show the legend.
Default: true
position
string
Where the legend should show in relation to the chart.
Default: 'right'
Options: 'top', 'right', 'bottom', 'left'
spacing
number
The spacing in pixels to use outside the legend.
Default: 20
item
Configuration for the legend items that consist of a marker and a label.
See item for more details.

item

chart > legend > item

Configuration for the legend items that consist of a marker and a label.

chart: {
  ...
  legend: {
    ...
    item: {
      paddingX?: number; // default: 16
      paddingY?: number; // default: 8
      marker?: Marker;
      label?: Label;
    }
  }
}
paddingX
number
The horizontal spacing in pixels to use between legend items.
Default: 16
paddingY
number
The vertical spacing in pixels to use between legend items.
Default: 8
marker
Configuration for the legend markers.
See marker for more details.
label
Configuration for the legend labels.
See label for more details.
marker
chart > legend > item > marker

Configuration for the legend markers.

chart: {
  ...
  legend: {
    ...
    item: {
      ...
      marker: {
        padding?: number; // default: 8
        shape?: string;
        size?: number; // default: 15
        strokeWidth?: number; // default: 1
      }
    }
  }
}
padding
number
The padding in pixels between a legend marker and the corresponding label.
Default: 8
shape
string
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.
Options: 'circle', 'cross', 'diamond', 'plus', 'square', 'triangle'
size
number
The size in pixels of the markers in the legend.
Default: 15
strokeWidth
number
The width in pixels of the stroke for markers in the legend.
Default: 1
label
chart > legend > item > label

Configuration for the legend labels.

chart: {
  ...
  legend: {
    ...
    item: {
      ...
      label: {
        color?: string; // default: 'black'
        fontStyle?: 'normal' | 'italic' | 'oblique'; // default: 'normal'
        fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
        fontSize?: number; // default: 12
        fontFamily?: string; // default: 'Verdana, sans-serif'
        formatter?: Function;
      }
    }
  }
}
color
string
The colour of the text.
Default: 'black'
fontStyle
string
The font style to use for the legend.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeight
string
The font weight to use for the legend.
Default: 'normal'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSize
number
The font size in pixels to use for the legend.
Default: 12
fontFamily
string
The font family to use for the legend.
Default: 'Verdana, sans-serif'
formatter
Function
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.
formatter = (params: FormatterParams) => string;

interface FormatterParams {
  id: string;
  itemId: any;
  value: string;
}

navigator

chart > navigator

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

chart: {
  ...
  navigator: {
    enabled?: boolean; // default: false
    height?: number; // default: 30
    margin?: number; // default: 10
    min?: number; // default: 0
    max?: number; // default: 1
    mask?: Mask;
    minHandle?: MinHandle;
    maxHandle?: MaxHandle;
  }
}
enabled
boolean
Whether or not to show the navigator.
Default: false
height
number
The height of the navigator.
Default: 30
margin
number
The distance between the navigator and the bottom axis.
Default: 10
min
number
The start of the visible range in the [0, 1] interval.
Default: 0
max
number
The end of the visible range in the [0, 1] interval.
Default: 1
mask
Configuration for the navigator's visible range mask.
See mask for more details.
minHandle
Configuration for the navigator's left handle.
See minHandle for more details.
maxHandle
Configuration for the navigator's right handle.
See maxHandle for more details.

mask

chart > navigator > mask

Configuration for the navigator's visible range mask.

chart: {
  ...
  navigator: {
    ...
    mask: {
      fill?: string; // default: '#999999'
      stroke?: string; // default: '#999999'
      strokeWidth?: number; // default: 1
      fillOpacity?: number; // default: 0.2
    }
  }
}
fill
string
The fill colour used by the mask.
Default: '#999999'
stroke
string
The stroke colour used by the mask.
Default: '#999999'
strokeWidth
number
The stroke width used by the mask.
Default: 1
fillOpacity
number
The opacity of the mask's fill in the [0, 1] interval, where 0 is effectively no masking.
Default: 0.2

minHandle

chart > navigator > minHandle

Configuration for the navigator's left handle.

chart: {
  ...
  navigator: {
    ...
    minHandle: {
      fill?: string; // default: '#f2f2f2'
      stroke?: string; // default: '#999999'
      strokeWidth?: number; // default: 1
      width?: number; // default: 8
      height?: number; // default: 16
      gripLineLength?: number; // default: 8
      gripLineGap?: number; // default: 2
    }
  }
}
fill
string
The fill colour used by the handle.
Default: '#f2f2f2'
stroke
string
The stroke colour used by the handle.
Default: '#999999'
strokeWidth
number
The stroke width used by the handle.
Default: 1
width
number
The width of the handle.
Default: 8
height
number
The height of the handle.
Default: 16
gripLineLength
number
The length of the handle's grip lines.
Default: 8
gripLineGap
number
The distance between the handle's grip lines.
Default: 2

maxHandle

chart > navigator > maxHandle

Configuration for the navigator's right handle.

chart: {
  ...
  navigator: {
    ...
    maxHandle: {
      fill?: string; // default: '#f2f2f2'
      stroke?: string; // default: '#999999'
      strokeWidth?: number; // default: 1
      width?: number; // default: 8
      height?: number; // default: 16
      gripLineLength?: number; // default: 8
      gripLineGap?: number; // default: 2
    }
  }
}
fill
string
The fill colour used by the handle.
Default: '#f2f2f2'
stroke
string
The stroke colour used by the handle.
Default: '#999999'
strokeWidth
number
The stroke width used by the handle.
Default: 1
width
number
The width of the handle.
Default: 8
height
number
The height of the handle.
Default: 16
gripLineLength
number
The length of the handle's grip lines.
Default: 8
gripLineGap
number
The distance between the handle's grip lines.
Default: 2

Axis Configuration

Configuration for axes in cartesian charts.

axis: {
  type?: string;
  position?: string;
  thickness?: number; // default: 0
  nice?: boolean; // default: true
  base?: number; // default: 10
  min?: number;
  max?: number;
  title?: Title;
  line?: Line;
  tick?: Tick;
  label?: Label;
  gridStyle?: GridStyle;
}
type
string
The type of the axis.
Options: 'category', 'number', 'log', 'time'
position
string
The position on the chart where the axis should be rendered.
Options: 'top', 'right', 'bottom', 'left'
thickness
number
If set to a non-zero value, the axis will have the specified thickness regardless of label size.
Default: 0
nice
boolean
If 'true', the range will be rounded up to ensure nice equal spacing between the ticks. Applies to continuous axes only ('number', 'time').
Default: true
base
number
The base of the logarithm used by the 'log' axis.
Default: 10
min
number
User override for the automatically determinted min value (based on series data). Only applied to "number" axes.
max
number
User override for the automatically determinted max value (based on series data). Only applied to "number" axes.
title
Configuration for the title shown next to the axis.
See title for more details.
line
Configuration for the axis line.
See line for more details.
tick
Configuration for the axis ticks.
See tick for more details.
label
Configuration for the axis labels, shown next to the ticks.
See label for more details.
gridStyle
Configuration of the lines used to form the grid in the chart area.
See gridStyle for more details.

title

axis > title

Configuration for the title shown next to the axis.

axis: {
  ...
  title: {
    enabled?: boolean; // default: true
    text?: string; // default: 'Axis Title'
    color?: string; // default: '#000000'
    fontStyle?: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'bold'
    fontSize?: number; // default: 14
    fontFamily?: string; // default: 'Verdana, sans-serif'
  }
}
enabled
boolean
Whether or not the axis title should be shown.
Default: true
text
string
The text to show in the axis title.
Default: 'Axis Title'
color
string
The colour to use for the axis title.
Default: '#000000'
fontStyle
string
The font style to use for the axis title.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeight
string
The font weight to use for the axis title.
Default: 'bold'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSize
number
The font size in pixels to use for the axis title.
Default: 14
fontFamily
string
The font family to use for the axis title.
Default: 'Verdana, sans-serif'

line

axis > line

Configuration for the axis line.

axis: {
  ...
  line: {
    width?: number; // default: 1
    color?: string; // default: 'rgba(195, 195, 195, 1)'
  }
}
width
number
The width in pixels of the axis line.
Default: 1
color
string
The colour of the axis line.
Default: 'rgba(195, 195, 195, 1)'

tick

axis > tick

Configuration for the axis ticks.

axis: {
  ...
  tick: {
    width?: number; // default: 1
    size?: number; // default: 6
    color?: string; // default: 'rgba(195, 195, 195, 1)'
    count?: number; // default: 10
  }
}
width
number
The width in pixels of the axis ticks (and corresponding grid line).
Default: 1
size
number
The length in pixels of the axis ticks.
Default: 6
color
string
The colour of the axis ticks.
Default: 'rgba(195, 195, 195, 1)'
count
number
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.
Default: 10

label

axis > label

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

axis: {
  ...
  label: {
    fontStyle?: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
    fontSize?: number; // default: 12
    fontFamily?: string; // default: 'Verdana, sans-serif'
    color?: string; // default: '#000000'
    padding?: number; // default: 5
    rotation?: number; // default: 0
    format?: string;
    formatter?: Function;
  }
}
fontStyle
string
The font style to use for the labels.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeight
string
The font weight to use for the labels.
Default: 'normal'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSize
number
The font size in pixels to use for the labels.
Default: 12
fontFamily
string
The font family to use for the labels.
Default: 'Verdana, sans-serif'
color
string
The colour to use for the labels.
Default: '#000000'
padding
number
Padding in pixels between the axis label and the tick.
Default: 5
rotation
number
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.
Default: 0
format
string
Format string used when rendering labels for time axes. For more information on the structure of the string, click here.
formatter
Function
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.
formatter = (params: FormatterParams) => string;

interface FormatterParams {
  value: any;
  index: number;
  fractionDigits: number;
  formatter: (x: any) => string;
}

gridStyle

axis > gridStyle

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

axis: {
  ...
  gridStyle: {
    stroke?: string; // default: 'rgba(195, 195, 195, 1)'
    lineDash?: number[]; // default: [4, 2]
  }
}
stroke
string
The colour of the grid line.
Default: 'rgba(195, 195, 195, 1)'
lineDash
number[]
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.
Default: [4, 2]

Bar/Column Series Configuration

Configuration for bar/column series.

bar: {
  xKey: string;
  xName?: string;
  yKeys: string[];
  yNames?: string[];
  data: object[];
  visible?: boolean; // default: true
  showInLegend?: boolean; // default: true
  cursor?: string; // default: 'default'
  tooltip?: Tooltip;
  grouped?: boolean; // default: false
  normalizedTo?: number;
  fills?: string[]; // default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888']
  fillOpacity?: number; // default: 1
  strokes?: string[]; // default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
  strokeOpacity?: number; // default: 1
  strokeWidth?: number; // default: 1
  highlightStyle?: HighlightStyle;
  shadow?: Shadow;
  lineDash?: number[]; // default: []
  lineDashOffset?: number; // default: 0
  label?: Label;
  formatter?: Function;
  listeners?: Listeners;
}
xKey *
string
The key to use to retrieve x-values from the data.
xName
string
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.
yKeys *
string[]
The keys to use to retrieve y-values from the data.
yNames
string[]
Human-readable descriptions 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.
data *
object[]
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
visible
boolean
Whether or not to display the series.
Default: true
showInLegend
boolean
Whether or not to include the series in the legend.
Default: true
cursor
string
The cursor to use for hovered bars/columns. This config is identical to the CSS cursor property.
Default: 'default'
tooltip
Series-specific tooltip configuration.
See tooltip for more details.
grouped
boolean
Whether to show different y-values as separate bars (grouped) or not (stacked).
Default: false
normalizedTo
number
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.
fills
string[]
The colours to cycle through for the fills of the bars.
Default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888']
fillOpacity
number
The opacity of the fill for the bars.
Default: 1
strokes
string[]
The colours to cycle through for the strokes of the bars.
Default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
strokeOpacity
number
The opacity of the stroke for the bars.
Default: 1
strokeWidth
number
The width in pixels of the stroke for the bars.
Default: 1
highlightStyle
Configuration for the highlighting used when the bars are hovered over.
See highlightStyle for more details.
shadow
Configuration for the shadow used behind the chart series.
See shadow for more details.
lineDash
number[]
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.
Default: []
lineDashOffset
number
The initial offset of the dashed line in pixels.
Default: 0
label
Configuration for the labels shown on bars.
See label for more details.
formatter
Function
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.
formatter = (params: FormatterParams) => Formatter;

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

interface Formatter {
  fill: string;
  stroke: string;
  strokeWidth: number;
}
listeners
A map of event names to event listeners.
See listeners for more details.

tooltip

bar > tooltip

Series-specific tooltip configuration.

bar: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    renderer?: Function;
  }
}
enabled
boolean
Whether or not to show tooltips when the series are hovered over.
Default: true
renderer
Function
Function used to create the content for tooltips.
renderer = (params: RendererParams) => string;

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

highlightStyle

bar > highlightStyle

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

bar: {
  ...
  highlightStyle: {
    fill?: string; // default: 'yellow'
    stroke?: string;
  }
}
fill
string
The fill colour of the bars when hovered over. Use undefined for no highlight.
Default: 'yellow'
stroke
string
The colour of the stroke around the bars when hovered over. Use undefined for no highlight.

shadow

bar > shadow

Configuration for the shadow used behind the chart series.

bar: {
  ...
  shadow: {
    enabled?: boolean; // default: true
    color?: string; // default: 'rgba(0, 0, 0, 0.5)'
    xOffset?: number; // default: 0
    yOffset?: number; // default: 0
    blur?: number; // default: 5
  }
}
enabled
boolean
Whether or not the shadow is visible.
Default: true
color
string
The colour of the shadow.
Default: 'rgba(0, 0, 0, 0.5)'
xOffset
number
The horizontal offset in pixels for the shadow.
Default: 0
yOffset
number
The vertical offset in pixels for the shadow.
Default: 0
blur
number
The radius of the shadow's blur, given in pixels.
Default: 5

label

bar > label

Configuration for the labels shown on bars.

bar: {
  ...
  label: {
    enabled?: boolean; // default: true
    placement?: 'inside' | 'outside'; // default: 'inside'
    color?: string; // default: 'rgba(70, 70, 70, 1)'
    fontStyle?: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
    fontSize?: number; // default: 12
    fontFamily?: string; // default: 'Verdana, sans-serif'
  }
}
enabled
boolean
Whether or not the labels should be shown.
Default: true
placement
string
Where to render series labels relative to the segments.
Default: 'inside'
Options: 'inside', 'outside'
color
string
The colour to use for the labels.
Default: 'rgba(70, 70, 70, 1)'
fontStyle
string
The font style to use for the labels.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeight
string
The font weight to use for the labels.
Default: 'normal'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSize
number
The font size in pixels to use for the labels.
Default: 12
fontFamily
string
The font family to use for the labels.
Default: 'Verdana, sans-serif'

listeners

bar > listeners

A map of event names to event listeners.

bar: {
  ...
  listeners: {
    nodeClick?: Function;
  }
}
nodeClick
Function
The listener to call when a bar/column node is clicked.
nodeClick = (params: NodeClickParams) => any;

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

Line Series Configuration

Configuration for line series.

line: {
  xKey: string;
  xName?: string;
  yKey: string;
  yName?: string;
  data: object[];
  visible?: boolean; // default: true
  showInLegend?: boolean; // default: true
  cursor?: string; // default: 'default'
  tooltip?: Tooltip;
  title?: string;
  stroke?: string; // default: '#aa4520'
  strokeOpacity?: number; // default: 1
  strokeWidth?: number; // default: 1
  marker?: Marker;
  highlightStyle?: HighlightStyle;
  lineDash?: number[]; // default: []
  lineDashOffset?: number; // default: 0
  listeners?: Listeners;
}
xKey *
string
The key to use to retrieve x-values from the data.
xName
string
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.
yKey *
string
The key to use to retrieve y-values from the data.
yName
string
A human-readable description of the y-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
data *
object[]
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
visible
boolean
Whether or not to display the series.
Default: true
showInLegend
boolean
Whether or not to include the series in the legend.
Default: true
cursor
string
The cursor to use for hovered line markers. This config is identical to the CSS cursor property.
Default: 'default'
tooltip
Series-specific tooltip configuration.
See tooltip for more details.
title
string
The title to use for the series. Defaults to yName if it exists, or yKey if not.
stroke
string
The colour of the stroke for the lines.
Default: '#aa4520'
strokeOpacity
number
The opacity of the stroke for the lines.
Default: 1
strokeWidth
number
The width in pixels of the stroke for the lines.
Default: 1
marker
Configuration for the markers used in the series.
See marker for more details.
highlightStyle
Configuration for the highlighting used when the markers are hovered over.
See highlightStyle for more details.
lineDash
number[]
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.
Default: []
lineDashOffset
number
The initial offset of the dashed line in pixels.
Default: 0
listeners
A map of event names to event listeners.
See listeners for more details.

tooltip

line > tooltip

Series-specific tooltip configuration.

line: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    renderer?: Function;
  }
}
enabled
boolean
Whether or not to show tooltips when the series are hovered over.
Default: true
renderer
Function
Function used to create the content for tooltips.
renderer = (params: RendererParams) => string;

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

marker

line > marker

Configuration for the markers used in the series.

line: {
  ...
  marker: {
    enabled?: boolean; // default: true
    shape?: string | Marker; // default: 'circle'
    size?: number; // default: 8
    maxSize?: number; // default: 30
    fill?: string;
    stroke?: string;
    strokeWidth?: number;
    formatter?: Function;
  }
}
enabled
boolean
Whether or not to show markers.
Default: true
shape
string | Marker
The shape to use for the markers. You can also supply a custom marker by providing a Marker subclass.
Default: 'circle'
Options: 'circle', 'cross', 'diamond', 'plus', 'square', 'triangle'
size
number
The size in pixels of the markers.
Default: 8
maxSize
number
For series where the size of the marker is determined by the data, this determines the largest size a marker can be in pixels.
Default: 30
fill
string
The colour to use for marker fills. If this is not specified, the markers will take their fill from the series.
stroke
string
The colour to use for marker strokes. If this is not specified, the markers will take their stroke from the series.
strokeWidth
number
The width in pixels of the marker stroke. If this is not specified, the markers will take their stroke width from the series.
formatter
Function
Function used to return formatting for individual markers, based on the supplied information. If the current marker 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.
formatter = (params: FormatterParams) => Formatter;

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

interface Formatter {
  fill: string;
  stroke: string;
  strokeWidth: number;
  size: number;
}

highlightStyle

line > highlightStyle

Configuration for the highlighting used when the markers are hovered over.

line: {
  ...
  highlightStyle: {
    fill?: string; // default: 'yellow'
    stroke?: string;
  }
}
fill
string
The fill colour of the markers when hovered over. Use undefined for no highlight.
Default: 'yellow'
stroke
string
The colour of the stroke around the markers when hovered over. Use undefined for no highlight.

listeners

line > listeners

A map of event names to event listeners.

line: {
  ...
  listeners: {
    nodeClick?: Function;
  }
}
nodeClick
Function
The listener to call when a line series node (marker) is clicked.
nodeClick = (params: NodeClickParams) => any;

interface NodeClickParams {
  type: 'nodeClick';
  series: LineSeries;
  datum: any;
  xKey: string;
  yKey: string;
}

Area Series Configuration

Configuration for area series.

area: {
  xKey: string;
  xName?: string;
  yKeys: string[];
  yNames?: string[];
  data: object[];
  visible?: boolean; // default: true
  showInLegend?: boolean; // default: true
  cursor?: string; // default: 'default'
  tooltip?: Tooltip;
  normalizedTo?: number;
  fills?: string[]; // default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888']
  fillOpacity?: number; // default: 1
  strokes?: string[]; // default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
  strokeOpacity?: number; // default: 1
  strokeWidth?: number; // default: 1
  marker?: Marker;
  highlightStyle?: HighlightStyle;
  lineDash?: number[]; // default: []
  lineDashOffset?: number; // default: 0
  shadow?: Shadow;
}
xKey *
string
The key to use to retrieve x-values from the data.
xName
string
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.
yKeys *
string[]
The keys to use to retrieve y-values from the data.
yNames
string[]
Human-readable descriptions 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.
data *
object[]
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
visible
boolean
Whether or not to display the series.
Default: true
showInLegend
boolean
Whether or not to include the series in the legend.
Default: true
cursor
string
The cursor to use for hovered area markers. This config is identical to the CSS cursor property.
Default: 'default'
tooltip
Series-specific tooltip configuration.
See tooltip for more details.
normalizedTo
number
The number to normalise the area stacks to. For example, if normalizedTo is set to 100, the stacks will all be scaled proportionally so that their total height is always 100.
fills
string[]
The colours to cycle through for the fills of the areas.
Default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888']
fillOpacity
number
The opacity of the fill for the areas.
Default: 1
strokes
string[]
The colours to cycle through for the strokes of the areas.
Default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
strokeOpacity
number
The opacity of the stroke for the areas.
Default: 1
strokeWidth
number
The width in pixels of the stroke for the areas.
Default: 1
marker
Configuration for the markers used in the series.
See marker for more details.
highlightStyle
Configuration for the highlighting used when the markers are hovered over.
See highlightStyle for more details.
lineDash
number[]
Defines how the area 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.
Default: []
lineDashOffset
number
The initial offset of the dashed line in pixels.
Default: 0
shadow
Configuration for the shadow used behind the chart series.
See shadow for more details.

tooltip

area > tooltip

Series-specific tooltip configuration.

area: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    renderer?: Function;
  }
}
enabled
boolean
Whether or not to show tooltips when the series are hovered over.
Default: true
renderer
Function
Function used to create the content for tooltips.
renderer = (params: RendererParams) => string;

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

marker

area > marker

Configuration for the markers used in the series.

area: {
  ...
  marker: {
    enabled?: boolean; // default: false
    shape?: string | Marker; // default: 'circle'
    size?: number; // default: 8
    maxSize?: number; // default: 30
    fill?: string;
    stroke?: string;
    strokeWidth?: number;
    formatter?: Function;
  }
}
enabled
boolean
Whether or not to show markers.
Default: false
shape
string | Marker
The shape to use for the markers. You can also supply a custom marker by providing a Marker subclass.
Default: 'circle'
Options: 'circle', 'cross', 'diamond', 'plus', 'square', 'triangle'
size
number
The size in pixels of the markers.
Default: 8
maxSize
number
For series where the size of the marker is determined by the data, this determines the largest size a marker can be in pixels.
Default: 30
fill
string
The colour to use for marker fills. If this is not specified, the markers will take their fill from the series.
stroke
string
The colour to use for marker strokes. If this is not specified, the markers will take their stroke from the series.
strokeWidth
number
The width in pixels of the marker stroke. If this is not specified, the markers will take their stroke width from the series.
formatter
Function
Function used to return formatting for individual markers, based on the supplied information. If the current marker 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.
formatter = (params: FormatterParams) => Formatter;

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

interface Formatter {
  fill: string;
  stroke: string;
  strokeWidth: number;
  size: number;
}

highlightStyle

area > highlightStyle

Configuration for the highlighting used when the markers are hovered over.

area: {
  ...
  highlightStyle: {
    fill?: string; // default: 'yellow'
    stroke?: string;
  }
}
fill
string
The fill colour of the markers when hovered over. Use undefined for no highlight.
Default: 'yellow'
stroke
string
The colour of the stroke around the markers when hovered over. Use undefined for no highlight.

shadow

area > shadow

Configuration for the shadow used behind the chart series.

area: {
  ...
  shadow: {
    enabled?: boolean; // default: true
    color?: string; // default: 'rgba(0, 0, 0, 0.5)'
    xOffset?: number; // default: 0
    yOffset?: number; // default: 0
    blur?: number; // default: 5
  }
}
enabled
boolean
Whether or not the shadow is visible.
Default: true
color
string
The colour of the shadow.
Default: 'rgba(0, 0, 0, 0.5)'
xOffset
number
The horizontal offset in pixels for the shadow.
Default: 0
yOffset
number
The vertical offset in pixels for the shadow.
Default: 0
blur
number
The radius of the shadow's blur, given in pixels.
Default: 5

Scatter/Bubble Series Configuration

Configuration for scatter/bubble series.

scatter: {
  xKey: string;
  xName?: string;
  yKey: string;
  yName?: string;
  sizeKey?: string;
  sizeName?: string;
  labelKey?: string;
  labelName?: string;
  data: object[];
  visible?: boolean; // default: true
  showInLegend?: boolean; // default: true
  cursor?: string; // default: 'default'
  tooltip?: Tooltip;
  title?: string;
  fill?: string; // default: '#f3622d'
  fillOpacity?: number; // default: 1
  stroke?: string; // default: '#aa4520'
  strokeOpacity?: number; // default: 1
  strokeWidth?: number; // default: 1
  marker?: Marker;
  highlightStyle?: HighlightStyle;
  listeners?: Listeners;
}
xKey *
string
The key to use to retrieve x-values from the data.
xName
string
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.
yKey *
string
The key to use to retrieve y-values from the data.
yName
string
A human-readable description of the y-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
sizeKey
string
The key to use to retrieve size values from the data, used to control the size of the markers in bubble charts.
sizeName
string
A human-readable description of the size values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
labelKey
string
The key to use to retrieve values from the data to use as labels for the markers.
labelName
string
A human-readable description of the label values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
data *
object[]
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
visible
boolean
Whether or not to display the series.
Default: true
showInLegend
boolean
Whether or not to include the series in the legend.
Default: true
cursor
string
The cursor to use for hovered scatter markers. This config is identical to the CSS cursor property.
Default: 'default'
tooltip
Series-specific tooltip configuration.
See tooltip for more details.
title
string
The title to use for the series. Defaults to yName if it exists, or yKey if not.
fill
string
The colour of the fill for the markers.
Default: '#f3622d'
fillOpacity
number
The opacity of the fill for the markers.
Default: 1
stroke
string
The colour of the stroke for the markers.
Default: '#aa4520'
strokeOpacity
number
The opacity of the stroke for the markers.
Default: 1
strokeWidth
number
The width in pixels of the stroke for the markers.
Default: 1
marker
Configuration for the markers used in the series.
See marker for more details.
highlightStyle
Configuration for the highlighting used when the markers are hovered over.
See highlightStyle for more details.
listeners
A map of event names to event listeners.
See listeners for more details.

tooltip

scatter > tooltip

Series-specific tooltip configuration.

scatter: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    renderer?: Function;
  }
}
enabled
boolean
Whether or not to show tooltips when the series are hovered over.
Default: true
renderer
Function
Function used to create the content for tooltips.
renderer = (params: RendererParams) => string;

interface RendererParams {
  datum: any;
  title?: string;
  color?: string;
  xKey: string;
  xValue: any;
  xName?: string;
  yKey: string;
  yValue: any;
  yName?: string;
  sizeKey?: string;
  sizeName?: string;
  labelKey?: string;
  labelName?: string;
}

marker

scatter > marker

Configuration for the markers used in the series.

scatter: {
  ...
  marker: {
    enabled?: boolean; // default: true
    shape?: string | Marker; // default: 'circle'
    size?: number; // default: 8
    maxSize?: number; // default: 30
    fill?: string;
    stroke?: string;
    strokeWidth?: number;
    formatter?: Function;
  }
}
enabled
boolean
Whether or not to show markers.
Default: true
shape
string | Marker
The shape to use for the markers. You can also supply a custom marker by providing a Marker subclass.
Default: 'circle'
Options: 'circle', 'cross', 'diamond', 'plus', 'square', 'triangle'
size
number
The size in pixels of the markers.
Default: 8
maxSize
number
For series where the size of the marker is determined by the data, this determines the largest size a marker can be in pixels.
Default: 30
fill
string
The colour to use for marker fills. If this is not specified, the markers will take their fill from the series.
stroke
string
The colour to use for marker strokes. If this is not specified, the markers will take their stroke from the series.
strokeWidth
number
The width in pixels of the marker stroke. If this is not specified, the markers will take their stroke width from the series.
formatter
Function
Function used to return formatting for individual markers, based on the supplied information. If the current marker 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.
formatter = (params: FormatterParams) => Formatter;

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

interface Formatter {
  fill: string;
  stroke: string;
  strokeWidth: number;
  size: number;
}

highlightStyle

scatter > highlightStyle

Configuration for the highlighting used when the markers are hovered over.

scatter: {
  ...
  highlightStyle: {
    fill?: string; // default: 'yellow'
    stroke?: string;
  }
}
fill
string
The fill colour of the markers when hovered over. Use undefined for no highlight.
Default: 'yellow'
stroke
string
The colour of the stroke around the markers when hovered over. Use undefined for no highlight.

listeners

scatter > listeners

A map of event names to event listeners.

scatter: {
  ...
  listeners: {
    nodeClick?: Function;
  }
}
nodeClick
Function
The listener to call when a scatter series node (marker) is clicked.
nodeClick = (params: NodeClickParams) => any;

interface NodeClickParams {
  type: 'nodeClick';
  series: ScatterSeries;
  datum: any;
  xKey: string;
  yKey: string;
  sizeKey?: string;
}

Pie/Doughnut Series Configuration

Configuration for pie/doughnut series.

pie: {
  angleKey: string;
  angleName?: string;
  labelKey: string;
  labelName?: string;
  radiusKey?: string;
  radiusName?: string;
  data: object[];
  visible?: boolean; // default: true
  showInLegend?: boolean; // default: true
  cursor?: string; // default: 'default'
  tooltip?: Tooltip;
  lineDash?: number[]; // default: []
  lineDashOffset?: number; // default: 0
  rotation?: number; // default: 0
  innerRadiusOffset?: number; // default: 0
  outerRadiusOffset?: number; // default: 0
  title?: Title;
  fills?: string[]; // default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888']
  fillOpacity?: number; // default: 1
  strokes?: string[]; // default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
  strokeOpacity?: number; // default: 1
  strokeWidth?: number; // default: 1
  highlightStyle?: HighlightStyle;
  label?: Label;
  callout?: Callout;
  shadow?: Shadow;
  listeners?: Listeners;
}
angleKey *
string
The key to use to retrieve angle values from the data.
angleName
string
A human-readable description of the angle values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
labelKey *
string
The key to use to retrieve label values from the data.
labelName
string
A human-readable description of the label values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
radiusKey
string
The key to use to retrieve radius values from the data.
radiusName
string
A human-readable description of the radius values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
data *
object[]
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
visible
boolean
Whether or not to display the series.
Default: true
showInLegend
boolean
Whether or not to include the series in the legend.
Default: true
cursor
string
The cursor to use for hovered pie slices. This config is identical to the CSS cursor property.
Default: 'default'
tooltip
Series-specific tooltip configuration.
See tooltip for more details.
lineDash
number[]
Defines how the pie sector 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.
Default: []
lineDashOffset
number
The initial offset of the dashed line in pixels.
Default: 0
rotation
number
The rotation of the pie series in degrees.
Default: 0
innerRadiusOffset
number
The offset in pixels of the inner radius of the series. Used to construct doughnut charts. If this is not given, or a value of zero is given, a pie chart will be rendered.
Default: 0
outerRadiusOffset
number
The offset in pixels of the outer radius of the series. Used to construct doughnut charts.
Default: 0
title
Configuration for the series title.
See title for more details.
fills
string[]
The colours to cycle through for the fills of the segments.
Default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888']
fillOpacity
number
The opacity of the fill for the segments.
Default: 1
strokes
string[]
The colours to cycle through for the strokes of the segments.
Default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
strokeOpacity
number
The opacity of the stroke for the segments.
Default: 1
strokeWidth
number
The width in pixels of the stroke for the segments.
Default: 1
highlightStyle
Configuration for the highlighting used when the segments are hovered over.
See highlightStyle for more details.
label
Configuration for the labels used for the segments.
See label for more details.
callout
Configuration for the callouts used with the labels for the segments.
See callout for more details.
shadow
Configuration for the shadow used behind the chart series.
See shadow for more details.
listeners
A map of event names to event listeners.
See listeners for more details.

tooltip

pie > tooltip

Series-specific tooltip configuration.

pie: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    renderer?: Function;
  }
}
enabled
boolean
Whether or not to show tooltips when the series are hovered over.
Default: true
renderer
Function
Function used to create the content for tooltips.
renderer = (params: RendererParams) => string;

interface RendererParams {
  datum: any;
  title?: string;
  color?: string;
  angleKey: string;
  angleValue: any;
  angleName?: string;
  radiusKey?: string;
  radiusValue?: any;
  radiusName?: string;
  labelKey?: string;
  labelName?: string;
}

title

pie > title

Configuration for the series title.

pie: {
  ...
  title: {
    enabled?: boolean; // default: true
    text?: string;
    color?: string; // default: '#000000'
    fontStyle?: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
    fontSize?: number; // default: 10
    fontFamily?: string; // default: 'Verdana, sans-serif'
  }
}
enabled
boolean
Whether or not the title should be shown.
Default: true
text
string
The text to show in the title.
color
string
The colour to use for the title.
Default: '#000000'
fontStyle
string
The font style to use for the title.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeight
string
The font weight to use for the title.
Default: 'normal'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSize
number
The font size in pixels to use for the title.
Default: 10
fontFamily
string
The font family to use for the title.
Default: 'Verdana, sans-serif'

highlightStyle

pie > highlightStyle

Configuration for the highlighting used when the segments are hovered over.

pie: {
  ...
  highlightStyle: {
    fill?: string; // default: 'yellow'
    stroke?: string;
  }
}
fill
string
The fill colour of the segments when hovered over. Use undefined for no highlight.
Default: 'yellow'
stroke
string
The colour of the stroke around the segments when hovered over. Use undefined for no highlight.

label

pie > label

Configuration for the labels used for the segments.

pie: {
  ...
  label: {
    enabled?: boolean; // default: true
    color?: string; // default: '#000000'
    fontStyle?: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
    fontSize?: number; // default: 12
    fontFamily?: string; // default: 'Verdana, sans-serif'
    offset?: number; // default: 3
    minAngle?: number; // default: 20
    formatter?: Function;
  }
}
enabled
boolean
Whether or not the labels should be shown.
Default: true
color
string
The colour to use for the labels.
Default: '#000000'
fontStyle
string
The font style to use for the labels.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeight
string
The font weight to use for the labels.
Default: 'normal'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSize
number
The font size in pixels to use for the labels.
Default: 12
fontFamily
string
The font family to use for the labels.
Default: 'Verdana, sans-serif'
offset
number
Distance in pixels between the callout line and the label text.
Default: 3
minAngle
number
Minimum angle in degrees required for a segment to show a label.
Default: 20
formatter
Function
Function used to turn 'labelKey' values into text to be displayed next to each pie sector. Be default the values are simply stringified.
formatter = (params: FormatterParams) => string;

interface FormatterParams {
  value: string;
}

callout

pie > callout

Configuration for the callouts used with the labels for the segments.

pie: {
  ...
  callout: {
    colors?: string[]; // default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
    strokeWidth?: number; // default: 1
    length?: number; // default: 10
  }
}
colors
string[]
The colours to cycle through for the strokes of the callouts.
Default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
strokeWidth
number
The width in pixels of the stroke for callout lines.
Default: 1
length
number
The length in pixels of the callout lines.
Default: 10

shadow

pie > shadow

Configuration for the shadow used behind the chart series.

pie: {
  ...
  shadow: {
    enabled?: boolean; // default: true
    color?: string; // default: 'rgba(0, 0, 0, 0.5)'
    xOffset?: number; // default: 0
    yOffset?: number; // default: 0
    blur?: number; // default: 5
  }
}
enabled
boolean
Whether or not the shadow is visible.
Default: true
color
string
The colour of the shadow.
Default: 'rgba(0, 0, 0, 0.5)'
xOffset
number
The horizontal offset in pixels for the shadow.
Default: 0
yOffset
number
The vertical offset in pixels for the shadow.
Default: 0
blur
number
The radius of the shadow's blur, given in pixels.
Default: 5

listeners

pie > listeners

A map of event names to event listeners.

pie: {
  ...
  listeners: {
    nodeClick?: Function;
  }
}
nodeClick
Function
The listener to call when a pie slice is clicked.
nodeClick = (params: NodeClickParams) => any;

interface NodeClickParams {
  type: 'nodeClick';
  series: PieSeries;
  datum: any;
  angleKey: string;
  radiusKey?: string;
}

Treemap Series Configuration

Configuration for the treemap series.

treemap: {
  title?: Title;
  subtitle?: Subtitle;
  labels?: Labels;
  labelKey?: string; // default: 'label'
  sizeKey?: string; // default: 'size'
  colorKey?: string; // default: 'color'
  colorDomain?: number[]; // default: '[-5, 5]'
  colorRange?: string[]; // default: '['#cb4b3f', '#6acb64']'
  colorParents?: boolean; // default: false
  tooltip?: Tooltip;
  nodePadding?: number; // default: 2
  gradient?: boolean; // default: true
  cursor?: string; // default: 'default'
}
title
The label configuration for the top-level parent tiles.
See title for more details.
subtitle
The label configuration for the children of the top-level parent tiles.
See subtitle for more details.
labels
Configuration for the tile labels.
See labels for more details.
labelKey
string
The name of the node key containing the label.
Default: 'label'
sizeKey
string
The name of the node key containing the size value.
Default: 'size'
colorKey
string
The name of the node key containing the color value. This value (along with colorDomain and colorRange configs) will be used to determine the tile color.
Default: 'color'
colorDomain
number[]
The domain the 'colorKey' values belong to. The domain can contain more than two stops, for example [-5, 0, -5]. In that case the 'colorRange' should also use a matching number of colors.
Default: '[-5, 5]'
colorRange
string[]
The color range to interpolate the numeric colorDomain into. For example, if the colorDomain is [-5, 5] and colorRange is ['red', 'green'], a colorKey value of -5 will be assigned the 'red' color, 5 - 'green' color and 0 a blend of 'red' and 'green'.
Default: '['#cb4b3f', '#6acb64']'
colorParents
boolean
Whether or not to assign colors to non-leaf nodes based on 'colorKey'.
Default: false
tooltip
Series-specific tooltip configuration.
See tooltip for more details.
nodePadding
number
The amount
Default: 2
gradient
boolean
Whether or not to use gradients for treemap tiles.
Default: true
cursor
string
The cursor to use for hovered treemap tiles. This config is identical to the CSS cursor property.
Default: 'default'

title

treemap > title

The label configuration for the top-level parent tiles.

treemap: {
  ...
  title: {
    color?: string; // default: 'white'
    fontStyle?: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'bold'
    fontSize?: number; // default: 12
    fontFamily?: string; // default: 'Verdana, sans-serif'
    padding?: number; // default: 15
  }
}
color
string
The colour of the text.
Default: 'white'
fontStyle
string
The font style to use for the legend.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeight
string
The font weight to use for the legend.
Default: 'bold'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSize
number
The font size in pixels to use for the legend.
Default: 12
fontFamily
string
The font family to use for the legend.
Default: 'Verdana, sans-serif'
padding
number
The amount of the tile's vertical space to reserve for the label.
Default: 15

subtitle

treemap > subtitle

The label configuration for the children of the top-level parent tiles.

treemap: {
  ...
  subtitle: {
    color?: string; // default: 'white'
    fontStyle?: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'bold'
    fontSize?: number; // default: 9
    fontFamily?: string; // default: 'Verdana, sans-serif'
    padding?: number; // default: 13
  }
}
color
string
The colour of the text.
Default: 'white'
fontStyle
string
The font style to use for the legend.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeight
string
The font weight to use for the legend.
Default: 'bold'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSize
number
The font size in pixels to use for the legend.
Default: 9
fontFamily
string
The font family to use for the legend.
Default: 'Verdana, sans-serif'
padding
number
The amount of the tile's vertical space to reserve for the label.
Default: 13

labels

treemap > labels

Configuration for the tile labels.

treemap: {
  ...
  labels: {
    large?: Large;
    medium?: Medium;
    small?: Small;
    color?: Color;
  }
}
large
The label configuration for the large leaf tiles.
See large for more details.
medium
The label configuration for the medium-sized leaf tiles.
See medium for more details.
small
The label configuration for the small leaf tiles.
See small for more details.
color
The configuration for the labels showing the value of the 'colorKey'.
See color for more details.

large

treemap > labels > large

The label configuration for the large leaf tiles.

treemap: {
  ...
  labels: {
    ...
    large: {
      color?: string; // default: 'white'
      fontStyle?: 'normal' | 'italic' | 'oblique'; // default: 'normal'
      fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'bold'
      fontSize?: number; // default: 18
      fontFamily?: string; // default: 'Verdana, sans-serif'
    }
  }
}
color
string
The colour of the text.
Default: 'white'
fontStyle
string
The font style to use for the legend.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeight
string
The font weight to use for the legend.
Default: 'bold'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSize
number
The font size in pixels to use for the legend.
Default: 18
fontFamily
string
The font family to use for the legend.
Default: 'Verdana, sans-serif'

medium

treemap > labels > medium

The label configuration for the medium-sized leaf tiles.

treemap: {
  ...
  labels: {
    ...
    medium: {
      color?: string; // default: 'white'
      fontStyle?: 'normal' | 'italic' | 'oblique'; // default: 'normal'
      fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'bold'
      fontSize?: number; // default: 14
      fontFamily?: string; // default: 'Verdana, sans-serif'
    }
  }
}
color
string
The colour of the text.
Default: 'white'
fontStyle
string
The font style to use for the legend.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeight
string
The font weight to use for the legend.
Default: 'bold'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSize
number
The font size in pixels to use for the legend.
Default: 14
fontFamily
string
The font family to use for the legend.
Default: 'Verdana, sans-serif'

small

treemap > labels > small

The label configuration for the small leaf tiles.

treemap: {
  ...
  labels: {
    ...
    small: {
      color?: string; // default: 'white'
      fontStyle?: 'normal' | 'italic' | 'oblique'; // default: 'normal'
      fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'bold'
      fontSize?: number; // default: 10
      fontFamily?: string; // default: 'Verdana, sans-serif'
    }
  }
}
color
string
The colour of the text.
Default: 'white'
fontStyle
string
The font style to use for the legend.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeight
string
The font weight to use for the legend.
Default: 'bold'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSize
number
The font size in pixels to use for the legend.
Default: 10
fontFamily
string
The font family to use for the legend.
Default: 'Verdana, sans-serif'

color

treemap > labels > color

The configuration for the labels showing the value of the 'colorKey'.

treemap: {
  ...
  labels: {
    ...
    color: {
      color?: string; // default: 'white'
      fontStyle?: 'normal' | 'italic' | 'oblique'; // default: 'normal'
      fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'bold'
      fontSize?: number; // default: 12
      fontFamily?: string; // default: 'Verdana, sans-serif'
    }
  }
}
color
string
The colour of the text.
Default: 'white'
fontStyle
string
The font style to use for the legend.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeight
string
The font weight to use for the legend.
Default: 'bold'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSize
number
The font size in pixels to use for the legend.
Default: 12
fontFamily
string
The font family to use for the legend.
Default: 'Verdana, sans-serif'

tooltip

treemap > tooltip

Series-specific tooltip configuration.

treemap: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    renderer?: Function;
  }
}
enabled
boolean
Whether or not to show tooltips when the series are hovered over.
Default: true
renderer
Function
Function used to create the content for tooltips.
renderer = (params: RendererParams) => string;

interface RendererParams {
  datum: any;
  labelKey: string;
  sizeKey?: string;
  colorKey?: string;
}

Histogram Series Configuration

Configuration for histogram series.

histogram: {
  data: object[];
  visible?: boolean; // default: true
  showInLegend?: boolean; // default: true
  cursor?: string; // default: 'default'
  tooltip?: Tooltip;
  xKey: string;
  xName?: string;
  yKey?: string;
  yName?: string;
  binCount?: number; // default: 10
  bins?: number[][];
  aggregation?: string; // default: 'sum'
  areaPlot?: boolean; // default: 'false'
  lineDash?: number[]; // default: []
  lineDashOffset?: number; // default: 0
  highlightStyle?: HighlightStyle;
  fill?: string; // default: '#f3622d'
  fillOpacity?: number; // default: 1
  stroke?: string; // default: '#aa4520'
  strokeOpacity?: number; // default: 1
  strokeWidth?: number; // default: 1
  listeners?: Listeners;
}
data *
object[]
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
visible
boolean
Whether or not to display the series.
Default: true
showInLegend
boolean
Whether or not to include the series in the legend.
Default: true
cursor
string
The cursor to use for hovered histogram bars. This config is identical to the CSS cursor property.
Default: 'default'
tooltip
Series-specific tooltip configuration.
See tooltip for more details.
xKey *
string
The key to use to retrieve x-values from the data.
xName
string
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.
yKey
string
The key to use to retrieve y-values from the data.
yName
string
A human-readable description of the y-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
binCount
number
The number of bins to try to split the x axis into. Clashes with the bins setting.
Default: 10
bins
number[][]
Set the bins explicitly. The bins need not be of equal width. Clashes with the binCount setting.
aggregation
string
Dictates how the bins are aggregated. If set to 'sum', the value shown for the bins will be the total of the yKey values. If set to 'mean', it will display the average yKey value of the bin
Default: 'sum'
Options: 'sum', 'mean'
areaPlot
boolean
For variable width bins, if true the histogram will represent the aggregated yKey values using the area of the bar. Otherwise, the height of the var represents the value as per a normal bar chart. This is useful for keeping an undistorted curve displayed when using variable-width bins
Default: 'false'
lineDash
number[]
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.
Default: []
lineDashOffset
number
The initial offset of the dashed line in pixels.
Default: 0
highlightStyle
Configuration for the highlighting used when the bars are hovered over.
See highlightStyle for more details.
fill
string
The colour of the fill for the histogram bars.
Default: '#f3622d'
fillOpacity
number
The opacity of the fill for the histogram bars.
Default: 1
stroke
string
The colour of the stroke for the histogram bars.
Default: '#aa4520'
strokeOpacity
number
The opacity of the stroke for the histogram bars.
Default: 1
strokeWidth
number
The width in pixels of the stroke for the histogram bars.
Default: 1
listeners
A map of event names to event listeners.
See listeners for more details.

tooltip

histogram > tooltip

Series-specific tooltip configuration.

histogram: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    renderer?: Function;
  }
}
enabled
boolean
Whether or not to show tooltips when the series are hovered over.
Default: true
renderer
Function
Function used to create the content for tooltips.
renderer = (params: RendererParams) => string;

interface RendererParams {
  datum: any;
  title?: string;
  color?: string;
  xKey: string;
  xValue: any;
  xName?: string;
  yKey: string;
  yValue: any;
  yName?: string;
  sizeKey?: string;
  sizeName?: string;
  labelKey?: string;
  labelName?: string;
}

highlightStyle

histogram > highlightStyle

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

histogram: {
  ...
  highlightStyle: {
    fill?: string; // default: 'yellow'
    stroke?: string;
  }
}
fill
string
The fill colour of the bars when hovered over. Use undefined for no highlight.
Default: 'yellow'
stroke
string
The colour of the stroke around the bars when hovered over. Use undefined for no highlight.

listeners

histogram > listeners

A map of event names to event listeners.

histogram: {
  ...
  listeners: {
    nodeClick?: Function;
  }
}
nodeClick
Function
The listener to call when a histogram bar is clicked.
nodeClick = (params: NodeClickParams) => any;

interface NodeClickParams {
  type: 'nodeClick';
  series: HistogramSeries;
  datum: any;
  xKey: string;
}