Framework:Javascript GridAngular GridReact GridVue Grid

Vue Charts: Themes API Reference

This page documents the AG Charts Themes API. You can find more details about AG Charts themes in the Themes section.

Theme Configuration

This object is used to define the configuration for a custom chart theme.

theme: {
  baseTheme?: 'default' | 'dark' | 'material' | 'material-dark' | 'pastel' | 'pastel-dark' | 'solar' | 'solar-dark' | 'vivid' | 'vivid-dark'; // default: 'default'
  palette?: Palette;
  overrides?: Overrides;
}
baseTheme
string
The name of the theme to base your theme on. Your custom theme will inherit all of the configuration from the base theme, allowing you to override just the settings you wish to change using the defaults config (see below).
Default: 'default'
Options: 'default', 'dark', 'material', 'material-dark', 'pastel', 'pastel-dark', 'solar', 'solar-dark', 'vivid', 'vivid-dark'
palette
The palette to use. If specified, this replaces the palette from the base theme.
See palette for more details.
overrides
Configuration from this object is merged over the defaults specified in the base theme.
See overrides for more details.

palette

theme > palette

The palette to use. If specified, this replaces the palette from the base theme.

theme: {
  ...
  palette: {
    fills?: string[];
    strokes?: string[];
  }
}
fills
string[]
The array of fills to be used.
strokes
string[]
The array of strokes to be used.

overrides

theme > overrides

Configuration from this object is merged over the defaults specified in the base theme.

theme: {
  ...
  overrides: {
    common?: IChart;
    cartesian?: IChart;
    polar?: IChart;
    hierarchy?: IChart;
    bar?: IChart;
    histogram?: IChart;
    line?: IChart;
    scatter?: IChart;
    area?: IChart;
    pie?: IChart;
  }
}
common
IChart
Specifies defaults for all chart types. Be careful to only use properties that apply to all chart types here. For example, don't specify navigator configuration here as navigators are only available in cartesian charts. See Chart Configuration.
cartesian
IChart
Specifies defaults for all cartesian charts (used for bar, column, histogram, line, scatter and area series). See Chart Configuration.
polar
IChart
Specifies defaults for all polar charts (used for pie series). See Chart Configuration.
hierarchy
IChart
Specifies defaults for all hierarchy charts (used for treemap series). See Chart Configuration.
bar
IChart
Specifies defaults for bar/column charts. See Chart Configuration.
histogram
IChart
Specifies defaults for histogram charts. See Chart Configuration.
line
IChart
Specifies defaults for line charts. See Chart Configuration.
scatter
IChart
Specifies defaults for scatter/bubble charts. See Chart Configuration.
area
IChart
Specifies defaults for line charts. See Chart Configuration.
pie
IChart
Specifies defaults for pie/doughnut charts. See Chart Configuration.

Chart Configuration

This is the common configuration shared by all types of chart, as used in the overrides object.

chart: {
  autoSize?: boolean; // default: true
  width?: number;
  height?: number;
  tooltip?: Tooltip;
  padding?: Padding;
  background?: Background;
  title?: Title;
  subtitle?: Subtitle;
  legend?: Legend;
  navigator?: Navigator;
  axes?: Axes;
  series?: Series;
}
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.
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.
axes
See axes for more details.
series
This object contains configuration for the different series that might be rendered into the chart.

For cartesian charts, the following series are supported: 'bar', 'column', 'histogram', 'line', 'scatter', 'area'
For polar charts, the following series are supported: 'pie'

If the series property is being set inside configuration for a specific type of chart (e.g. line), instead of supplying the whole series object as specified here, for convenience you can put the relevant series configuration object directly into the series property, since all series for a specific chart will be of the same type (e.g. line).
See series 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;
  label: { text: 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
    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
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

axes

chart > axes
chart: {
  ...
  axes: {
    number?: INumberAxis;
    log?: ILogAxis;
    category?: ICategoryAxis;
    groupedCategory?: IGroupedCategoryAxis;
    time?: ITimeCategoryAxis;
  }
}
number
This extends the common axis configuration with options specific to number axes.
See number for more details.
log
This extends the common axis configuration with options specific to number axes.
See log for more details.
category
This extends the common axis configuration with options specific to category axes.
See category for more details.
groupedCategory
This extends the common axis configuration with options specific to grouped category axes. Currently there are no additional options beyond the common configuration.
See groupedCategory for more details.
time
This extends the common axis configuration with options specific to time axes.
See time for more details.

number

chart > axes > number

This extends the common axis configuration with options specific to number axes.

chart: {
  ...
  axes: {
    ...
    number: {
      nice?: boolean; // default: true
      min?: number;
      max?: number;
    }
  }
}
nice
boolean
If true, the axis will adjust to align the left and right edge of the chart with a tick. Otherwise, the axis will be the minimum required width to show all the data.
Default: true
min
number
The minimum value for the axis.
max
number
The maximum value for the axis.

log

chart > axes > log

This extends the common axis configuration with options specific to number axes.

chart: {
  ...
  axes: {
    ...
    log: {
      nice?: boolean; // default: true
      min?: number;
      max?: number;
      base?: number; // default: 10
    }
  }
}
nice
boolean
If true, the axis will adjust to align the left and right edge of the chart with a tick. Otherwise, the axis will be the minimum required width to show all the data.
Default: true
min
number
The minimum value for the axis.
max
number
The maximum value for the axis.
base
number
The logarithm base. For example, 10 for the common logarithm, Math.E for the natural logarithm, and so on.
Default: 10

category

chart > axes > category

This extends the common axis configuration with options specific to category axes.

chart: {
  ...
  axes: {
    ...
    category: {
      paddingInner?: number;
      paddingOuter?: number;
    }
  }
}
paddingInner
number
The padding between the category label and the line.
paddingOuter
number
The padding between lines for neighbouring categories.

time

chart > axes > time

This extends the common axis configuration with options specific to time axes.

chart: {
  ...
  axes: {
    ...
    time: {
      nice?: boolean; // default: true
    }
  }
}
nice
boolean
If true, the axis will adjust to align the left and right edge of the chart with a tick. Otherwise, the axis will be the minimum required width to show all the data.
Default: true

series

chart > series

This object contains configuration for the different series that might be rendered into the chart.

For cartesian charts, the following series are supported: 'bar', 'column', 'histogram', 'line', 'scatter', 'area'
For polar charts, the following series are supported: 'pie'

If the series property is being set inside configuration for a specific type of chart (e.g. line), instead of supplying the whole series object as specified here, for convenience you can put the relevant series configuration object directly into the series property, since all series for a specific chart will be of the same type (e.g. line).

chart: {
  ...
  series: {
    bar?: IBarColumnSeries;
    column?: IBarColumnSeries;
    histogram?: IHistogramSeries;
    line?: ILineSeries;
    area?: IAreaSeries;
    scatter?: IScatterSeries;
    pie?: IPieSeries;
  }
}
bar
Configuration for bar series.
See bar for more details.
column
IBarColumnSeries
Configuration for column series. The configuration is the same shape as for bar series. See Bar/Column Series Configuration.
histogram
Configuration for histogram series.
See histogram for more details.
line
Configuration for line series.
See line for more details.
area
Configuration for area series.
See area for more details.
scatter
Configuration for scatter/bubble series.
See scatter for more details.
pie
Configuration for pie/doughnut series.
See pie for more details.

bar

chart > series > bar

Configuration for bar series.

chart: {
  ...
  series: {
    ...
    bar: {
      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
      lineDash?: number[]; // default: []
      lineDashOffset?: number; // default: 0
      highlightStyle?: HighlightStyle;
      shadow?: Shadow;
      label?: Label;
    }
  }
}
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
lineDash
number[]
Defines how the bar 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 lines in pixels.
Default: 0
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.
label
Configuration for the labels shown on bars.
See label for more details.
tooltip
chart > series > bar > tooltip

Series-specific tooltip configuration.

chart: {
  ...
  series: {
    ...
    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
chart > series > bar > highlightStyle

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

chart: {
  ...
  series: {
    ...
    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
chart > series > bar > shadow

Configuration for the shadow used behind the chart series.

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
chart > series > bar > label

Configuration for the labels shown on bars.

chart: {
  ...
  series: {
    ...
    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'

histogram

chart > series > histogram

Configuration for histogram series.

chart: {
  ...
  series: {
    ...
    histogram: {
      tooltip?: Tooltip;
      binCount?: number;
      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
    }
  }
}
tooltip
Series-specific tooltip configuration.
See tooltip for more details.
binCount
number
The number of bins to try to split the x axis into. Clashes with the bins setting.
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 histogram 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 lines 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
tooltip
chart > series > histogram > tooltip

Series-specific tooltip configuration.

chart: {
  ...
  series: {
    ...
    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
chart > series > histogram > highlightStyle

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

chart: {
  ...
  series: {
    ...
    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.

line

chart > series > line

Configuration for line series.

chart: {
  ...
  series: {
    ...
    line: {
      tooltip?: Tooltip;
      title?: string;
      stroke?: string; // default: '#aa4520'
      strokeOpacity?: number; // default: 1
      strokeWidth?: number; // default: 1
      marker?: Marker;
      lineDash?: number[]; // default: []
      lineDashOffset?: number; // default: 0
      highlightStyle?: HighlightStyle;
    }
  }
}
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.
lineDash
number[]
Defines how the line 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 lines in pixels.
Default: 0
highlightStyle
Configuration for the highlighting used when the markers are hovered over.
See highlightStyle for more details.
tooltip
chart > series > line > tooltip

Series-specific tooltip configuration.

chart: {
  ...
  series: {
    ...
    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
chart > series > line > marker

Configuration for the markers used in the series.

chart: {
  ...
  series: {
    ...
    line: {
      ...
      marker: {
        enabled?: boolean; // default: true
        shape?: string | Marker; // default: 'circle'
        size?: number; // default: 8
        minSize?: number; // default: 12
        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
minSize
number
For series where the size of the marker is determined by the data, this determines the smallest size a marker can be in pixels.
Default: 12
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
chart > series > line > highlightStyle

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

chart: {
  ...
  series: {
    ...
    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.

area

chart > series > area

Configuration for area series.

chart: {
  ...
  series: {
    ...
    area: {
      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
      lineDash?: number[]; // default: []
      lineDashOffset?: number; // default: 0
      marker?: Marker;
      highlightStyle?: HighlightStyle;
      shadow?: Shadow;
    }
  }
}
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
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 lines in pixels.
Default: 0
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.
shadow
Configuration for the shadow used behind the chart series.
See shadow for more details.
tooltip
chart > series > area > tooltip

Series-specific tooltip configuration.

chart: {
  ...
  series: {
    ...
    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
chart > series > area > marker

Configuration for the markers used in the series.

chart: {
  ...
  series: {
    ...
    area: {
      ...
      marker: {
        enabled?: boolean; // default: false
        shape?: string | Marker; // default: 'circle'
        size?: number; // default: 8
        minSize?: number; // default: 12
        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
minSize
number
For series where the size of the marker is determined by the data, this determines the smallest size a marker can be in pixels.
Default: 12
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
chart > series > area > highlightStyle

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

chart: {
  ...
  series: {
    ...
    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
chart > series > area > shadow

Configuration for the shadow used behind the chart series.

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

chart > series > scatter

Configuration for scatter/bubble series.

chart: {
  ...
  series: {
    ...
    scatter: {
      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;
    }
  }
}
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.
tooltip
chart > series > scatter > tooltip

Series-specific tooltip configuration.

chart: {
  ...
  series: {
    ...
    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
chart > series > scatter > marker

Configuration for the markers used in the series.

chart: {
  ...
  series: {
    ...
    scatter: {
      ...
      marker: {
        enabled?: boolean; // default: true
        shape?: string | Marker; // default: 'circle'
        size?: number; // default: 8
        minSize?: number; // default: 12
        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
minSize
number
For series where the size of the marker is determined by the data, this determines the smallest size a marker can be in pixels.
Default: 12
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
chart > series > scatter > highlightStyle

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

chart: {
  ...
  series: {
    ...
    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.

pie

chart > series > pie

Configuration for pie/doughnut series.

chart: {
  ...
  series: {
    ...
    pie: {
      tooltip?: Tooltip;
      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
      lineDash?: number[]; // default: []
      lineDashOffset?: number; // default: 0
      highlightStyle?: HighlightStyle;
      label?: Label;
      callout?: Callout;
      shadow?: Shadow;
    }
  }
}
tooltip
Series-specific tooltip configuration.
See tooltip for more details.
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
lineDash
number[]
Defines how the pie 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 lines in pixels.
Default: 0
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.
tooltip
chart > series > pie > tooltip

Series-specific tooltip configuration.

chart: {
  ...
  series: {
    ...
    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
chart > series > pie > title

Configuration for the series title.

chart: {
  ...
  series: {
    ...
    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
chart > series > pie > highlightStyle

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

chart: {
  ...
  series: {
    ...
    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
chart > series > pie > label

Configuration for the labels used for the segments.

chart: {
  ...
  series: {
    ...
    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
chart > series > pie > callout

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

chart: {
  ...
  series: {
    ...
    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
chart > series > pie > shadow

Configuration for the shadow used behind the chart series.

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

Common Axis Configuration

This is the configuration shared by all types of axis.

axis: {
  top?: Top;
  right?: Right;
  bottom?: Bottom;
  left?: Left;
  thickness?: number; // default: 0
  nice?: boolean; // default: true
  min?: number;
  max?: number;
  title?: Title;
  line?: Line;
  tick?: Tick;
  label?: Label;
  gridStyle?: GridStyle;
}
top
An object with axis theme overrides for the top positioned axes. Same configs apply here as one level above. For example, to rotate labels by 45 degrees in 'top' positioned axes one can use top: { label: { rotation: 45 } } }.
See top for more details.
right
An object with axis theme overrides for the right positioned axes. Same configs apply here as one level above.
See right for more details.
bottom
An object with axis theme overrides for the bottom positioned axes. Same configs apply here as one level above.
See bottom for more details.
left
An object with axis theme overrides for the left positioned axes. Same configs apply here as one level above.
See left for more details.
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
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.
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]

Common Series Configuration

This is the common configuration shared by all types of series.

series: {
  visible?: boolean; // default: true
  showInLegend?: boolean; // default: true
  cursor?: string; // default: 'default'
  listeners?: Object;
}
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 series items (such as bar segments or line markers). This config is identical to the CSS cursor property.
Default: 'default'
listeners
Object
A map of event names to event listener functions. The keys can be one of the following: nodeClick