ag-Charts Themes API Reference

This page documents the ag-Charts Themes API. You can find more details about ag-Chart 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?: IPalette; overrides?: IOverrides; }
baseThemeThe 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'
paletteThe palette to use. If specified, this replaces the palette from the base theme. See palette for more details about this configuration object.
overridesConfiguration from this object is merged over the defaults specified in the base theme. See overrides for more details about this configuration object.

palette

theme > palette

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

theme: { ... palette: { fills?: string[]; strokes?: string[]; } }
fillsThe array of fills to be used.
strokesThe 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; bar?: IChart; histogram?: IChart; line?: IChart; scatter?: IChart; area?: IChart; pie?: IChart; } }
commonSpecifies 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.
cartesianSpecifies defaults for all cartesian charts (used for bar, column, histogram, line, scatter and area series). See Chart Configuration.
polarSpecifies defaults for all polar charts (used for pie series). See Chart Configuration.
barSpecifies defaults for bar/column charts. See Chart Configuration.
histogramSpecifies defaults for histogram charts. See Chart Configuration.
lineSpecifies defaults for line charts. See Chart Configuration.
scatterSpecifies defaults for scatter/bubble charts. See Chart Configuration.
areaSpecifies defaults for line charts. See Chart Configuration.
pieSpecifies 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; padding?: IPadding; background?: IBackground; title?: ITitle; subtitle?: ISubtitle; legend?: ILegend; navigator?: INavigator; axes?: IAxes; series?: ISeries; }
autoSizeBy 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
widthThe width of the chart in pixels. Has no effect if autoSize is set to true.
heightThe height of the chart in pixels. Has no effect if autoSize is set to true.
paddingConfiguration for the padding shown around the chart. See padding for more details about this configuration object.
backgroundConfiguration for the background shown behind the chart. See background for more details about this configuration object.
titleConfiguration for the title shown at the top of the chart. See title for more details about this configuration object.
subtitleConfiguration 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 about this configuration object.
legendConfiguration for the chart legend. See legend for more details about this configuration object.
navigatorConfiguration for the chart navigator. This config is only supported by cartesian charts. See navigator for more details about this configuration object.
axesSee axes for more details about this configuration object.
seriesThis 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 about this configuration object.

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 } }
topThe number of pixels of padding at the top of the chart area.
Default: 20
rightThe number of pixels of padding at the right of the chart area.
Default: 20
bottomThe number of pixels of padding at the bottom of the chart area.
Default: 20
leftThe 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 } }
fillColour of the chart background.
Default: '#FFFFFF'
visibleWhether 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' } }
enabledWhether or not the title should be shown.
Default: true
textThe text to show in the title.
Default: 'Title'
colorThe colour to use for the title.
Default: '#000000'
fontStyleThe font style to use for the title.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeightThe font weight to use for the title.
Default: 'bold'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSizeThe font size in pixels to use for the title.
Default: 18
fontFamilyThe 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' } }
enabledWhether or not the subtitle should be shown.
Default: true
textThe text to show in the subtitle.
Default: 'Subtitle'
colorThe colour to use for the subtitle.
Default: '#000000'
fontStyleThe font style to use for the subtitle.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeightThe font weight to use for the subtitle.
Default: 'normal'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSizeThe font size in pixels to use for the subtitle.
Default: 14
fontFamilyThe 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 layoutHorizontalSpacing?: number; // default: 16 layoutVerticalSpacing?: number; // default: 8 itemSpacing?: number; // default: 8 markerShape?: string; markerSize?: number; // default: 15 strokeWidth?: number; // default: 1 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' } }
enabledWhether or not to show the legend.
Default: true
positionWhere the legend should show in relation to the chart.
Default: 'right'
Options: 'top', 'right', 'bottom', 'left'
spacingThe spacing in pixels to use outside the legend.
Default: 20
layoutHorizontalSpacingThe horizontal spacing in pixels to use between legend items.
Default: 16
layoutVerticalSpacingThe vertical spacing in pixels to use between legend items.
Default: 8
itemSpacingThe spacing in pixels between a legend marker and the corresponding label.
Default: 8
markerShapeIf 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'
markerSizeThe size in pixels of the markers in the legend.
Default: 15
strokeWidthThe width in pixels of the stroke for markers in the legend.
Default: 1
colorThe colour of the text.
Default: 'black'
fontStyleThe font style to use for the legend.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeightThe font weight to use for the legend.
Default: 'normal'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSizeThe font size in pixels to use for the legend.
Default: 12
fontFamilyThe font family to use for the legend.
Default: 'Verdana, sans-serif'

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?: IMask; minHandle?: IMinHandle; maxHandle?: IMaxHandle; } }
enabledWhether or not to show the navigator.
Default: false
heightThe height of the navigator.
Default: 30
minThe start of the visible range in the [0, 1] interval.
Default: 0
maxThe end of the visible range in the [0, 1] interval.
Default: 1
maskConfiguration for the navigator's visible range mask. See mask for more details about this configuration object.
minHandleConfiguration for the navigator's left handle. See minHandle for more details about this configuration object.
maxHandleConfiguration for the navigator's right handle. See maxHandle for more details about this configuration object.

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 } } }
fillThe fill colour used by the mask.
Default: '#999999'
strokeThe stroke colour used by the mask.
Default: '#999999'
strokeWidthThe stroke width used by the mask.
Default: 1
fillOpacityThe 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 } } }
fillThe fill colour used by the handle.
Default: '#f2f2f2'
strokeThe stroke colour used by the handle.
Default: '#999999'
strokeWidthThe stroke width used by the handle.
Default: 1
widthThe width of the handle.
Default: 8
heightThe height of the handle.
Default: 16
gripLineLengthThe length of the handle's grip lines.
Default: 8
gripLineGapThe 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 } } }
fillThe fill colour used by the handle.
Default: '#f2f2f2'
strokeThe stroke colour used by the handle.
Default: '#999999'
strokeWidthThe stroke width used by the handle.
Default: 1
widthThe width of the handle.
Default: 8
heightThe height of the handle.
Default: 16
gripLineLengthThe length of the handle's grip lines.
Default: 8
gripLineGapThe distance between the handle's grip lines.
Default: 2

axes

chart > axes

chart: { ... axes: { number?: INumberAxis; category?: ICategoryAxis; groupedCategory?: IGroupedCategoryAxis; time?: ITimeCategoryAxis; } }
numberThis extends the common axis configuration with options specific to number axes. See number for more details about this configuration object.
categoryThis extends the common axis configuration with options specific to category axes. See category for more details about this configuration object.
groupedCategoryThis 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 about this configuration object.
timeThis extends the common axis configuration with options specific to time axes. See time for more details about this configuration object.

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; } } }
niceIf 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
minThe minimum value for the axis.
maxThe maximum value for the axis.

category

chart > axes > category

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

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

groupedCategory

chart > axes > groupedCategory

This extends the common axis configuration with options specific to grouped category axes. Currently there are no additional options beyond the common configuration.

chart: { ... axes: { ... groupedCategory: { } } }

time

chart > axes > time

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

chart: { ... axes: { ... time: { nice?: boolean; // default: true } } }
niceIf 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; } }
barConfiguration for bar series. See bar for more details about this configuration object.
columnConfiguration for column series. The configuration is the same shape as for bar series. See Bar/Column Series Configuration.
histogramConfiguration for histogram series. See histogram for more details about this configuration object.
lineConfiguration for line series. See line for more details about this configuration object.
areaConfiguration for area series. See area for more details about this configuration object.
scatterConfiguration for scatter/bubble series. See scatter for more details about this configuration object.
pieConfiguration for pie/doughnut series. See pie for more details about this configuration object.

bar

chart > series > bar

Configuration for bar series.

chart: { ... series: { ... bar: { tooltipRenderer?: Function; 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?: IHighlightStyle; shadow?: IShadow; label?: ILabel; } } }
tooltipRendererFunction used to create the content for tooltips.function (params: IParams): string; interface IParams { datum: any; title?: string; color?: string; xKey: string; xName?: string; yKey: string; yName?: string; }
groupedWhether to show different y-values as separate bars (grouped) or not (stacked).
Default: false
normalizedToThe 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.
fillsThe colours to cycle through for the fills of the bars.
Default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888']
fillOpacityThe opacity of the fill for the bars.
Default: 1
strokesThe colours to cycle through for the strokes of the bars.
Default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
strokeOpacityThe opacity of the stroke for the bars.
Default: 1
strokeWidthThe width in pixels of the stroke for the bars.
Default: 1
highlightStyleConfiguration for the highlighting used when the bars are hovered over. See highlightStyle for more details about this configuration object.
shadowConfiguration for the shadow used behind the chart series. See shadow for more details about this configuration object.
labelConfiguration for the labels shown on bars. See label for more details about this configuration object.
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; } } } }
fillThe fill colour of the bars when hovered over.
Default: 'yellow'
strokeThe colour of the stroke around the bars when hovered over.
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 } } } }
enabledWhether or not the shadow is visible.
Default: true
colorThe colour of the shadow.
Default: 'rgba(0, 0, 0, 0.5)'
xOffsetThe horizontal offset in pixels for the shadow.
Default: 0
yOffsetThe vertical offset in pixels for the shadow.
Default: 0
blurThe 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 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' } } } }
enabledWhether or not the labels should be shown.
Default: true
colorThe colour to use for the labels.
Default: 'rgba(70, 70, 70, 1)'
fontStyleThe font style to use for the labels.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeightThe font weight to use for the labels.
Default: 'normal'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSizeThe font size in pixels to use for the labels.
Default: 12
fontFamilyThe font family to use for the labels.
Default: 'Verdana, sans-serif'

histogram

chart > series > histogram

Configuration for histogram series.

chart: { ... series: { ... histogram: { tooltipRenderer?: Function; binCount?: number; bins?: number[][]; aggregation?: string; // default: 'sum' areaPlot?: boolean; // default: 'false' highlightStyle?: IHighlightStyle; fill?: string; // default: '#f3622d' fillOpacity?: number; // default: 1 stroke?: string; // default: '#aa4520' strokeOpacity?: number; // default: 1 strokeWidth?: number; // default: 1 } } }
tooltipRendererFunction used to create the content for tooltips.function (params: IParams): string; interface IParams { datum: any; title?: string; color?: string; xKey: string; xName?: string; yKey: string; yName?: string; sizeKey?: string; sizeName?: string; labelKey?: string; labelName?: string; }
binCountThe number of bins to try to split the x axis into. Clashes with the bins setting.
binsSet the bins explicitly. The bins need not be of equal width. Clashes with the binCount setting.
aggregationDictates 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'
areaPlotFor 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'
highlightStyleConfiguration for the highlighting used when the bars are hovered over. See highlightStyle for more details about this configuration object.
fillThe colour of the fill for the histogram bars.
Default: '#f3622d'
fillOpacityThe opacity of the fill for the histogram bars.
Default: 1
strokeThe colour of the stroke for the histogram bars.
Default: '#aa4520'
strokeOpacityThe opacity of the stroke for the histogram bars.
Default: 1
strokeWidthThe width in pixels of the stroke for the histogram bars.
Default: 1
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; } } } }
fillThe fill colour of the bars when hovered over.
Default: 'yellow'
strokeThe colour of the stroke around the bars when hovered over.

line

chart > series > line

Configuration for line series.

chart: { ... series: { ... line: { tooltipRenderer?: Function; title?: string; stroke?: string; // default: '#aa4520' strokeOpacity?: number; // default: 1 strokeWidth?: number; // default: 1 marker?: IMarker; highlightStyle?: IHighlightStyle; } } }
tooltipRendererFunction used to create the content for tooltips.function (params: IParams): string; interface IParams { datum: any; title?: string; color?: string; xKey: string; xName?: string; yKey: string; yName?: string; }
titleThe title to use for the series. Defaults to yName if it exists, or yKey if not.
strokeThe colour of the stroke for the lines.
Default: '#aa4520'
strokeOpacityThe opacity of the stroke for the lines.
Default: 1
strokeWidthThe width in pixels of the stroke for the lines.
Default: 1
markerConfiguration for the markers used in the series. See marker for more details about this configuration object.
highlightStyleConfiguration for the highlighting used when the markers are hovered over. See highlightStyle for more details about this configuration object.
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; } } } }
enabledWhether or not to show markers.
Default: true
shapeThe 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'
sizeThe size in pixels of the markers.
Default: 8
minSizeFor 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
fillThe colour to use for marker fills. If this is not specified, the markers will take their fill from the series.
strokeThe colour to use for marker strokes. If this is not specified, the markers will take their stroke from the series.
strokeWidthThe width in pixels of the marker stroke. If this is not specified, the markers will take their stroke width from the series.
formatterFunction 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.function (params: IParams): IReturn; interface IParams { datum: any; fill: string; stroke: string; strokeWidth: number; size: number; highlighted: boolean; xKey: string; yKey: string; } interface IReturn { 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; } } } }
fillThe fill colour of the markers when hovered over.
Default: 'yellow'
strokeThe colour of the stroke around the markers when hovered over.

area

chart > series > area

Configuration for area series.

chart: { ... series: { ... area: { tooltipRenderer?: Function; 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?: IMarker; highlightStyle?: IHighlightStyle; shadow?: IShadow; } } }
tooltipRendererFunction used to create the content for tooltips.function (params: IParams): string; interface IParams { datum: any; title?: string; color?: string; xKey: string; xName?: string; yKey: string; yName?: string; }
normalizedToThe 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.
fillsThe colours to cycle through for the fills of the areas.
Default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888']
fillOpacityThe opacity of the fill for the areas.
Default: 1
strokesThe colours to cycle through for the strokes of the areas.
Default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
strokeOpacityThe opacity of the stroke for the areas.
Default: 1
strokeWidthThe width in pixels of the stroke for the areas.
Default: 1
markerConfiguration for the markers used in the series. See marker for more details about this configuration object.
highlightStyleConfiguration for the highlighting used when the markers are hovered over. See highlightStyle for more details about this configuration object.
shadowConfiguration for the shadow used behind the chart series. See shadow for more details about this configuration object.
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; } } } }
enabledWhether or not to show markers.
Default: false
shapeThe 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'
sizeThe size in pixels of the markers.
Default: 8
minSizeFor 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
fillThe colour to use for marker fills. If this is not specified, the markers will take their fill from the series.
strokeThe colour to use for marker strokes. If this is not specified, the markers will take their stroke from the series.
strokeWidthThe width in pixels of the marker stroke. If this is not specified, the markers will take their stroke width from the series.
formatterFunction 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.function (params: IParams): IReturn; interface IParams { datum: any; fill: string; stroke: string; strokeWidth: number; size: number; highlighted: boolean; xKey: string; yKey: string; } interface IReturn { 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; } } } }
fillThe fill colour of the markers when hovered over.
Default: 'yellow'
strokeThe colour of the stroke around the markers when hovered over.
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 } } } }
enabledWhether or not the shadow is visible.
Default: true
colorThe colour of the shadow.
Default: 'rgba(0, 0, 0, 0.5)'
xOffsetThe horizontal offset in pixels for the shadow.
Default: 0
yOffsetThe vertical offset in pixels for the shadow.
Default: 0
blurThe radius of the shadow's blur, given in pixels.
Default: 5

scatter

chart > series > scatter

Configuration for scatter/bubble series.

chart: { ... series: { ... scatter: { tooltipRenderer?: Function; title?: string; fill?: string; // default: '#f3622d' fillOpacity?: number; // default: 1 stroke?: string; // default: '#aa4520' strokeOpacity?: number; // default: 1 strokeWidth?: number; // default: 1 marker?: IMarker; highlightStyle?: IHighlightStyle; } } }
tooltipRendererFunction used to create the content for tooltips.function (params: IParams): string; interface IParams { datum: any; title?: string; color?: string; xKey: string; xName?: string; yKey: string; yName?: string; sizeKey?: string; sizeName?: string; labelKey?: string; labelName?: string; }
titleThe title to use for the series. Defaults to yName if it exists, or yKey if not.
fillThe colour of the fill for the markers.
Default: '#f3622d'
fillOpacityThe opacity of the fill for the markers.
Default: 1
strokeThe colour of the stroke for the markers.
Default: '#aa4520'
strokeOpacityThe opacity of the stroke for the markers.
Default: 1
strokeWidthThe width in pixels of the stroke for the markers.
Default: 1
markerConfiguration for the markers used in the series. See marker for more details about this configuration object.
highlightStyleConfiguration for the highlighting used when the markers are hovered over. See highlightStyle for more details about this configuration object.
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; } } } }
enabledWhether or not to show markers.
Default: true
shapeThe 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'
sizeThe size in pixels of the markers.
Default: 8
minSizeFor 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
fillThe colour to use for marker fills. If this is not specified, the markers will take their fill from the series.
strokeThe colour to use for marker strokes. If this is not specified, the markers will take their stroke from the series.
strokeWidthThe width in pixels of the marker stroke. If this is not specified, the markers will take their stroke width from the series.
formatterFunction 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.function (params: IParams): IReturn; interface IParams { datum: any; fill: string; stroke: string; strokeWidth: number; size: number; highlighted: boolean; xKey: string; yKey: string; } interface IReturn { 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; } } } }
fillThe fill colour of the markers when hovered over.
Default: 'yellow'
strokeThe colour of the stroke around the markers when hovered over.

pie

chart > series > pie

Configuration for pie/doughnut series.

chart: { ... series: { ... pie: { tooltipRenderer?: Function; rotation?: number; // default: 0 innerRadiusOffset?: number; // default: 0 outerRadiusOffset?: number; // default: 0 title?: ITitle; 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?: IHighlightStyle; label?: ILabel; callout?: ICallout; shadow?: IShadow; } } }
tooltipRendererFunction used to create the content for tooltips.function (params: IParams): string; interface IParams { datum: any; title?: string; color?: string; angleKey: string; angleName?: string; radiusKey?: string; radiusName?: string; labelKey?: string; labelName?: string; }
rotationThe rotation of the pie series in degrees.
Default: 0
innerRadiusOffsetThe 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
outerRadiusOffsetThe offset in pixels of the outer radius of the series. Used to construct doughnut charts.
Default: 0
titleConfiguration for the series title. See title for more details about this configuration object.
fillsThe colours to cycle through for the fills of the segments.
Default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888']
fillOpacityThe opacity of the fill for the segments.
Default: 1
strokesThe colours to cycle through for the strokes of the segments.
Default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
strokeOpacityThe opacity of the stroke for the segments.
Default: 1
strokeWidthThe width in pixels of the stroke for the segments.
Default: 1
highlightStyleConfiguration for the highlighting used when the segments are hovered over. See highlightStyle for more details about this configuration object.
labelConfiguration for the labels used for the segments. See label for more details about this configuration object.
calloutConfiguration for the callouts used with the labels for the segments. See callout for more details about this configuration object.
shadowConfiguration for the shadow used behind the chart series. See shadow for more details about this configuration object.
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' } } } }
enabledWhether or not the title should be shown.
Default: true
textThe text to show in the title.
colorThe colour to use for the title.
Default: '#000000'
fontStyleThe font style to use for the title.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeightThe font weight to use for the title.
Default: 'normal'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSizeThe font size in pixels to use for the title.
Default: 10
fontFamilyThe 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; } } } }
fillThe fill colour of the segments when hovered over.
Default: 'yellow'
strokeThe colour of the stroke around the segments when hovered over.
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 } } } }
enabledWhether or not the labels should be shown.
Default: true
colorThe colour to use for the labels.
Default: '#000000'
fontStyleThe font style to use for the labels.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeightThe font weight to use for the labels.
Default: 'normal'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSizeThe font size in pixels to use for the labels.
Default: 12
fontFamilyThe font family to use for the labels.
Default: 'Verdana, sans-serif'
offsetDistance in pixels between the callout line and the label text.
Default: 3
minAngleMinimum angle in degrees required for a segment to show a label.
Default: 20
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 } } } }
colorsThe colours to cycle through for the strokes of the callouts.
Default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
strokeWidthThe width in pixels of the stroke for callout lines.
Default: 1
lengthThe 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 } } } }
enabledWhether or not the shadow is visible.
Default: true
colorThe colour of the shadow.
Default: 'rgba(0, 0, 0, 0.5)'
xOffsetThe horizontal offset in pixels for the shadow.
Default: 0
yOffsetThe vertical offset in pixels for the shadow.
Default: 0
blurThe 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: { title?: ITitle; line?: ILine; tick?: ITick; label?: ILabel; gridStyle?: IGridStyle; }
titleConfiguration for the title shown next to the axis. See title for more details about this configuration object.
lineConfiguration for the axis line. See line for more details about this configuration object.
tickConfiguration for the axis ticks. See tick for more details about this configuration object.
labelConfiguration for the axis labels, shown next to the ticks. See label for more details about this configuration object.
gridStyleConfiguration of the lines used to form the grid in the chart area. See gridStyle for more details about this configuration object.

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' } }
enabledWhether or not the axis title should be shown.
Default: true
textThe text to show in the axis title.
Default: 'Axis Title'
colorThe colour to use for the axis title.
Default: '#000000'
fontStyleThe font style to use for the axis title.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeightThe font weight to use for the axis title.
Default: 'bold'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSizeThe font size in pixels to use for the axis title.
Default: 14
fontFamilyThe 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)' } }
widthThe width in pixels of the axis line.
Default: 1
colorThe 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 } }
widthThe width in pixels of the axis ticks (and corresponding grid line).
Default: 1
sizeThe length in pixels of the axis ticks.
Default: 6
colorThe colour of the axis ticks.
Default: 'rgba(195, 195, 195, 1)'
countA 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; } }
fontStyleThe font style to use for the labels.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeightThe font weight to use for the labels.
Default: 'normal'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSizeThe font size in pixels to use for the labels.
Default: 12
fontFamilyThe font family to use for the labels.
Default: 'Verdana, sans-serif'
colorThe colour to use for the labels.
Default: '#000000'
paddingPadding in pixels between the axis label and the tick.
Default: 5
rotationThe rotation of the axis labels in degrees.
Default: 0
formatFormat string used when rendering labels for time axes. For more information on the structure of the string, click here.
formatterFunction 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.function (params: IParams): string; interface IParams { 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] } }
strokeThe colour of the grid line.
Default: 'rgba(195, 195, 195, 1)'
lineDashDefines 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 tooltipEnabled?: boolean; // default: true listeners?: Object; }
visibleWhether or not to display the series.
Default: true
showInLegendWhether or not to include the series in the legend.
Default: true
tooltipEnabledWhether or not to show tooltips when the series are hovered over.
Default: true
listenersA map of event names to event listener functions. The keys can be one of the following: nodeClick