1.x classes

Parameters

series Series | SeriesObject<SeriesPrimitiveValue>

options LineChartOptionsWithDefaults

key T

Parameters

container Element

The containing DOM Node object that will be used to plant the SVG element

width? string | number = '100%'

Set the width of the SVG element. Default is 100%

height? string | number = '100%'

Set the height of the SVG element. Default is 100%

className? string

Specify a class to be added to the SVG element

viewBox? ViewBox

Returns

Parameters

position number

index number

axis Axis

offset number

length number

group Svg

classes string[]

eventEmitter EventEmitter

Parameters

gridGroup Svg

chartRect ChartRect

className string

eventEmitter EventEmitter

Parameters

position number

length number

index number

label Label

axis Axis

axisOffset number

labelOffset { x: number; y: number }

group Svg

classes string[]

eventEmitter EventEmitter

Parameters

options T

Options set by user

responsiveOptions ResponsiveOptions<T> | undefined

Optional functions to add responsive behavior to chart

eventEmitter EventEmitter

The event emitter that will be used to emit the options changed events

Returns

Properties

classNames? { … }

The class names of the chart's elements. Change them to style the chart with your own CSS instead of Chartist's.

classNames.chart? string default 'ct-chart-bar'

The chart's SVG element.

classNames.horizontalBars? string default 'ct-horizontal-bars'

The chart's SVG element, with horizontalBars.

classNames.label? string default 'ct-label'

Each axis label.

classNames.labelGroup? string default 'ct-labels'

The group of an axis's labels.

classNames.series? string default 'ct-series'

The group of each series.

classNames.bar? string default 'ct-bar'

Each bar.

classNames.grid? string default 'ct-grid'

Each grid line.

classNames.gridGroup? string default 'ct-grids'

The group of the grid lines.

classNames.gridBackground? string default 'ct-grid-background'

The grid background (with showGridBackground).

classNames.vertical? string default 'ct-vertical'

Labels and grid lines of the vertical axis.

classNames.horizontal? string default 'ct-horizontal'

Labels and grid lines of the horizontal axis.

classNames.start? string default 'ct-start'

Labels at the start of their axis (left or top).

classNames.end? string default 'ct-end'

Labels at the end of their axis (right or bottom).

seriesBarDistance? number default 15

The distance in px between the bars of a group (one bar per series).

stackBars? boolean default false

Stacks the bars of a group on each other; stackMode says how.

stackMode? boolean | 'accumulate' | 'accumulate-relative' default 'accumulate'

How stacked bars stack: accumulate adds up each group's values (the value axis fits the totals), accumulate-relative stacks positive values up and negative values down, and true draws every bar from zero, overlapping.

horizontalBars? boolean default false

Draws horizontal bars. The axes swap: the Y axis shows the labels and the X axis the values, so swap their options too.

distributeSeries? boolean default false

Treats one flat array of values as one series per value, each in its own color: a profile rather than values over time.

reverseData? boolean default false

Reverses the labels, the order of the series and each series' values.

showGridBackground? boolean default false

Fills the grid area with a background (class ct-grid-background).

width? string | number

The chart's width: px as a number, or a CSS length such as '100%'. Without it, the chart takes the width of its container.

height? string | number

The chart's height: px as a number, or a CSS length such as '300px'. Without it, the chart takes the height of its container.

low? number

The lowest value the value axis shows, instead of the data's lowest. Values below it are drawn outside the drawing area.

high? number

The highest value the value axis shows, instead of the data's highest. Values above it are drawn outside the drawing area.

referenceValue? number default 0

A value the value axis always includes, such as 0, so it shows even when all values are above or below it. Bar charts use 0.

chartPadding? number | Partial<ChartPadding> default { top: 15, right: 15, bottom: 5, left: 10 }

Space in px between the chart's edges and its drawing area (labels sit in it): one number for every side, or an object with some sides.

axisX? TXAxisOptions default { offset: 30, position: 'end', labelOffset: { x: 0, y: 0 }, showLabel: true, showGrid: true, scaleMinSpace: 30, onlyInteger: false }

Options of the X axis.

axisY? TYAxisOptions default { offset: 40, position: 'start', labelOffset: { x: 0, y: 0 }, showLabel: true, showGrid: true, scaleMinSpace: 20, onlyInteger: false }

Options of the Y axis.

plugins? (Plugin | [Plugin, any] | { readonly name: string; install: (chart: any, options?: any) => void })[]

1.x plugin functions (they run with the compat plugin) and v2 plugins such as compat.

viewBox? ViewBox

A viewBox for the SVG, so the drawing scales with its box instead of being drawn for its size. Text scales too: adjust it with responsive options.

viewBox.width number

The viewBox width, in SVG units.

viewBox.height number

The viewBox height, in SVG units.

Properties

chartRect ChartRect

The drawing area, in px.

axisX Axis

The X axis, a 1.x Axis object.

axisY Axis

The Y axis, a 1.x Axis object.

svg Svg

The chart's SVG element, wrapped in Svg.

options TOptions

The options the chart was drawn with, defaults and responsive options applied.

Properties

type 'bar'

Always 'bar'.

value number | NormalizedMulti

The bar's normalized value: a number, or { x, y } numbers.

x1 number

The x of the bar's base, in px.

y1 number

The y of the bar's base, in px.

x2 number

The x of the bar's end (its value), in px.

y2 number

The y of the bar's end (its value), in px.

element Svg

The drawn element, wrapped in Svg: change or animate it here.

group Svg

The group the element is in, wrapped in Svg.

chartRect ChartRect

The drawing area, in px.

axisX Axis

The X axis, a 1.x Axis object.

axisY Axis

The Y axis, a 1.x Axis object.

meta any

The meta of the value (or of the series, for lines and areas).

index number

The index of the value in its series (of the series, for lines and areas).

series SeriesObject<SeriesPrimitiveValue> | FlatSeriesValue<FlatSeriesPrimitiveValue> | Series<SeriesPrimitiveValue>

The series as given in the data: an array or a series object.

seriesIndex number

The index of the series in the data.

Properties

data DataEvent

options OptionsChangedEvent

animationBegin AnimationEvent

animationEnd AnimationEvent

created TCreateEvent

draw TDrawEvents

Properties

classNames? { … }

The class names of the chart's elements. Change them to style the chart with your own CSS instead of Chartist's.

classNames.chart? string default 'ct-chart-line'

The chart's SVG element.

classNames.label? string default 'ct-label'

Each axis label.

classNames.labelGroup? string default 'ct-labels'

The group of an axis's labels.

classNames.series? string default 'ct-series'

The group of each series.

classNames.line? string default 'ct-line'

Each line.

classNames.point? string default 'ct-point'

Each point.

classNames.area? string default 'ct-area'

Each area.

classNames.grid? string default 'ct-grid'

Each grid line.

classNames.gridGroup? string default 'ct-grids'

The group of the grid lines.

classNames.gridBackground? string default 'ct-grid-background'

The grid background (with showGridBackground).

classNames.vertical? string default 'ct-vertical'

Labels and grid lines of the vertical axis.

classNames.horizontal? string default 'ct-horizontal'

Labels and grid lines of the horizontal axis.

classNames.start? string default 'ct-start'

Labels at the start of their axis (left or top).

classNames.end? string default 'ct-end'

Labels at the end of their axis (right or bottom).

showLine? boolean default true

Draws the lines.

showPoint? boolean default true

Draws a point at each value.

showArea? boolean default false

Fills the area between each line and areaBase.

areaBase? number default 0

The value the areas close at, usually 0.

lineSmooth? boolean | LineInterpolation default true

How a line runs between its points: true smooths it with Interpolation.monotoneCubic, false draws straight segments (Interpolation.none), or pass an interpolation such as Interpolation.cardinal(), Interpolation.step() or your own.

showGridBackground? boolean default false

Fills the grid area with a background (class ct-grid-background).

fullWidth? boolean default false

Stretches the X axis so the last value lands on the right edge, without a last grid line. The last label may need chart padding to fit.

reverseData? boolean default false

Reverses the labels, the order of the series and each series' values.

series? Record<string, Omit<LineChartOptions<TXAxisOptions, TYAxisOptions>, 'series'>>

Options per series, by series name: line options for one series.

width? string | number

The chart's width: px as a number, or a CSS length such as '100%'. Without it, the chart takes the width of its container.

height? string | number

The chart's height: px as a number, or a CSS length such as '300px'. Without it, the chart takes the height of its container.

low? number

The lowest value the value axis shows, instead of the data's lowest. Values below it are drawn outside the drawing area.

high? number

The highest value the value axis shows, instead of the data's highest. Values above it are drawn outside the drawing area.

referenceValue? number

A value the value axis always includes, such as 0, so it shows even when all values are above or below it. Bar charts use 0.

chartPadding? number | Partial<ChartPadding> default { top: 15, right: 15, bottom: 5, left: 10 }

Space in px between the chart's edges and its drawing area (labels sit in it): one number for every side, or an object with some sides.

axisX? TXAxisOptions default { offset: 30, position: 'end', labelOffset: { x: 0, y: 0 }, showLabel: true, showGrid: true }

Options of the X axis.

axisY? TYAxisOptions default { offset: 40, position: 'start', labelOffset: { x: 0, y: 0 }, showLabel: true, showGrid: true, scaleMinSpace: 20, onlyInteger: false }

Options of the Y axis.

plugins? (Plugin | [Plugin, any] | { readonly name: string; install: (chart: any, options?: any) => void })[]

1.x plugin functions (they run with the compat plugin) and v2 plugins such as compat.

viewBox? ViewBox

A viewBox for the SVG, so the drawing scales with its box instead of being drawn for its size. Text scales too: adjust it with responsive options.

viewBox.width number

The viewBox width, in SVG units.

viewBox.height number

The viewBox height, in SVG units.

Properties

chartRect ChartRect

The drawing area, in px.

axisX Axis

The X axis, a 1.x Axis object.

axisY Axis

The Y axis, a 1.x Axis object.

svg Svg

The chart's SVG element, wrapped in Svg.

options TOptions

The options the chart was drawn with, defaults and responsive options applied.

Properties

type 'point'

Always 'point'.

value NormalizedSeriesPrimitiveValue

The point's normalized value: { x, y } numbers, or a number.

x number

The point's x, in px.

y number

The point's y, in px.

element Svg

The drawn element, wrapped in Svg: change or animate it here.

group Svg

The group the element is in, wrapped in Svg.

chartRect ChartRect

The drawing area, in px.

axisX Axis

The X axis, a 1.x Axis object.

axisY Axis

The Y axis, a 1.x Axis object.

meta any

The meta of the value (or of the series, for lines and areas).

index number

The index of the value in its series (of the series, for lines and areas).

series SeriesObject<SeriesPrimitiveValue> | FlatSeriesValue<FlatSeriesPrimitiveValue> | Series<SeriesPrimitiveValue>

The series as given in the data: an array or a series object.

seriesIndex number

The index of the series in the data.

Properties

type 'line'

Always 'line'.

values NormalizedSeries

All normalized values of the series.

path SvgPath

The line's path as drawn (a copy, safe to change).

element Svg

The drawn element, wrapped in Svg: change or animate it here.

group Svg

The group the element is in, wrapped in Svg.

chartRect ChartRect

The drawing area, in px.

axisX Axis

The X axis, a 1.x Axis object.

axisY Axis

The Y axis, a 1.x Axis object.

meta any

The meta of the value (or of the series, for lines and areas).

index number

The index of the value in its series (of the series, for lines and areas).

series SeriesObject<SeriesPrimitiveValue> | FlatSeriesValue<FlatSeriesPrimitiveValue> | Series<SeriesPrimitiveValue>

The series as given in the data: an array or a series object.

seriesIndex number

The index of the series in the data.

Properties

type 'area'

Always 'area'.

values NormalizedSeries

All normalized values of the series.

path SvgPath

The area's path as drawn (a copy, safe to change).

element Svg

The drawn element, wrapped in Svg: change or animate it here.

group Svg

The group the element is in, wrapped in Svg.

chartRect ChartRect

The drawing area, in px.

axisX Axis

The X axis, a 1.x Axis object.

axisY Axis

The Y axis, a 1.x Axis object.

meta any

The meta of the value (or of the series, for lines and areas).

index number

The index of the value in its series (of the series, for lines and areas).

series SeriesObject<SeriesPrimitiveValue> | FlatSeriesValue<FlatSeriesPrimitiveValue> | Series<SeriesPrimitiveValue>

The series as given in the data: an array or a series object.

seriesIndex number

The index of the series in the data.

Properties

data DataEvent

options OptionsChangedEvent

animationBegin AnimationEvent

animationEnd AnimationEvent

created TCreateEvent

draw TDrawEvents

Properties

x number

The x, in px.

y number

The y, in px.

Properties

classNames? { … }

The class names of the chart's elements. Change them to style the chart with your own CSS instead of Chartist's.

classNames.chartPie? string default 'ct-chart-pie'

The chart's SVG element, for pies.

classNames.chartDonut? string default 'ct-chart-donut'

The chart's SVG element, for donuts.

classNames.series? string default 'ct-series'

The group of each series.

classNames.slicePie? string default 'ct-slice-pie'

Each pie slice.

classNames.sliceDonut? string default 'ct-slice-donut'

Each donut slice.

classNames.label? string default 'ct-label'

Each axis label.

startAngle? number default 0

Where the first slice starts, in degrees clockwise from the top.

total? number

The value a full circle stands for. With a total above the sum of the values, the pie stays open, as for a gauge.

donut? boolean default false

Draws a donut: rings instead of filled slices.

donutWidth? string | number

The width of a donut's ring: px as a number, or a share of the radius as a string ('30%'). Without it, the stylesheet sets the width (--ct-donut-width, 60px by default), and in the browser the ring is laid out for the width the stylesheet gives a slice. Without a DOM (renderToString()), it's laid out for 60 px.

showLabel? boolean default true

Draws a label for each slice.

labelOffset? number default 0

Moves the labels away from the center (positive) or toward it (negative), in px.

labelPosition? RadialLabelPosition default 'inside'

Where labels go: inside (halfway out on a pie, on the middle of a donut's ring, plus labelOffset), outside (at the outer edge) or center (in the middle; move them with labelOffset).

labelInterpolationFnc? (value: Label, index: number) => Label | null | undefined

Turns each slice's label (or value) and index into the text to show. Return null or undefined to leave a label out.

labelDirection? LabelDirection default 'neutral'

Which way labels anchor: neutral, explode (away from the center, for labels outside the pie) or implode (toward it).

ignoreEmptyValues? boolean default false

Leaves out the slices and labels of empty values.

preventOverlappingLabelOffset? number default 0

Moves labels apart so they don't overlap, using this offset in px. The overlap is judged by the length of the drawn label text. 0 leaves them where they are.

width? string | number

The chart's width: px as a number, or a CSS length such as '100%'. Without it, the chart takes the width of its container.

height? string | number

The chart's height: px as a number, or a CSS length such as '300px'. Without it, the chart takes the height of its container.

low? number

The lowest value the value axis shows, instead of the data's lowest. Values below it are drawn outside the drawing area.

high? number

The highest value the value axis shows, instead of the data's highest. Values above it are drawn outside the drawing area.

referenceValue? number

A value the value axis always includes, such as 0, so it shows even when all values are above or below it. Bar charts use 0.

chartPadding? number | Partial<ChartPadding> default { top: 5, right: 5, bottom: 5, left: 5 }

Space in px between the chart's edges and its drawing area (labels sit in it): one number for every side, or an object with some sides.

plugins? (Plugin | [Plugin, any] | { readonly name: string; install: (chart: any, options?: any) => void })[]

1.x plugin functions (they run with the compat plugin) and v2 plugins such as compat.

viewBox? ViewBox

A viewBox for the SVG, so the drawing scales with its box instead of being drawn for its size. Text scales too: adjust it with responsive options.

viewBox.width number

The viewBox width, in SVG units.

viewBox.height number

The viewBox height, in SVG units.

Properties

chartRect ChartRect

The drawing area, in px.

svg Svg

The chart's SVG element, wrapped in Svg.

options TOptions

The options the chart was drawn with, defaults and responsive options applied.

Properties

type 'slice'

Always 'slice'.

value NormalizedSeriesPrimitiveValue

The slice's value.

totalDataSum number

The value of the full circle: the sum of all values, or the total option.

path SvgPath

The slice's path as drawn (a copy, safe to change).

center Dot

The center of the pie, in px.

radius number

The radius of the pie, in px.

startAngle number

Where the slice starts, in degrees clockwise from the top.

endAngle number

Where the slice ends, in degrees clockwise from the top.

element Svg

The drawn element, wrapped in Svg: change or animate it here.

group Svg

The group the element is in, wrapped in Svg.

chartRect ChartRect

The drawing area, in px.

meta any

The meta of the value (or of the series, for lines and areas).

index number

The index of the value in its series (of the series, for lines and areas).

series SeriesObject<SeriesPrimitiveValue> | FlatSeriesValue<FlatSeriesPrimitiveValue> | Series<SeriesPrimitiveValue>

The series as given in the data: an array or a series object.

Properties

type 'label'

Always 'label'.

text string

The label as shown, after labelInterpolationFnc.

x number

The x the label is anchored at, in px.

y number

The y the label is anchored at, in px.

element Svg

The drawn element, wrapped in Svg: change or animate it here.

group Svg

The group the element is in, wrapped in Svg.

chartRect ChartRect

The drawing area, in px.

meta any

The meta of the value (or of the series, for lines and areas).

index number

The index of the value in its series (of the series, for lines and areas).

series SeriesObject<SeriesPrimitiveValue> | FlatSeriesValue<FlatSeriesPrimitiveValue> | Series<SeriesPrimitiveValue>

The series as given in the data: an array or a series object.

Properties

data DataEvent

options OptionsChangedEvent

animationBegin AnimationEvent

animationEnd AnimationEvent

created TCreateEvent

draw TDrawEvents

Properties

data DataEvent

options OptionsChangedEvent

animationBegin AnimationEvent

animationEnd AnimationEvent

created TCreateEvent

draw TDrawEvents

Properties

removeMediaQueryListeners () => void

getCurrentOptions () => T

Properties

top number

Space above the drawing area, in px.

right number

Space right of the drawing area, in px.

bottom number

Space below the drawing area, in px.

left number

Space left of the drawing area, in px.

Properties

width? string | number

The chart's width: px as a number, or a CSS length such as '100%'. Without it, the chart takes the width of its container.

height? string | number

The chart's height: px as a number, or a CSS length such as '300px'. Without it, the chart takes the height of its container.

low? number

The lowest value the value axis shows, instead of the data's lowest. Values below it are drawn outside the drawing area.

high? number

The highest value the value axis shows, instead of the data's highest. Values above it are drawn outside the drawing area.

referenceValue? number

A value the value axis always includes, such as 0, so it shows even when all values are above or below it. Bar charts use 0.

chartPadding? number | Partial<ChartPadding>

Space in px between the chart's edges and its drawing area (labels sit in it): one number for every side, or an object with some sides.

axisX? TXAxisOptions

Options of the X axis.

axisY? TYAxisOptions

Options of the Y axis.

classNames? Record<string, string>

The class names of the chart's elements, to style a chart with your own classes instead of Chartist's.

plugins? (Plugin | [Plugin, any] | { readonly name: string; install: (chart: any, options?: any) => void })[]

1.x plugin functions (they run with the compat plugin) and v2 plugins such as compat.

viewBox? ViewBox

A viewBox for the SVG, so the drawing scales with its box instead of being drawn for its size. Text scales too: adjust it with responsive options.

Properties

type? AxisType

The axis type: StepAxis (one step per label), AutoScaleAxis (a scale fitted to the values) or FixedScaleAxis (fixed ticks).

low? number

The lowest value this axis shows, instead of the data's lowest.

high? number

The highest value this axis shows, instead of the data's highest.

referenceValue? number

A value this axis always includes, such as 0.

offset? number

Room in px for the axis labels, between the drawing area and the chart's edge.

position? 'end' | 'start'

Where the labels go: start (left or top) or end (right or bottom).

labelOffset? { x: number; y: number }

Moves the labels by x and y px from where they'd go.

showLabel? boolean

Draws the axis labels.

showGrid? boolean

Draws the grid lines of the axis.

labelInterpolationFnc? (value: Label, index: number) => Label | null | undefined

Turns each label (and its index) into the text to show. Return null or undefined to leave a label out.

scaleMinSpace? number

The minimum space in px between two grid lines of a scale: the scale takes fewer, larger steps to keep it.

onlyInteger? boolean

Only whole numbers on the scale.

ticks? Label[]

The ticks: the labels of a step axis, or the values of a fixed scale axis.

stretch? boolean

Step axis: spreads the ticks over the whole axis, so the last one lands on its end (line charts with fullWidth set it).

divisor? number

Fixed scale axis without ticks: the number of equal steps between its low and high, with a tick at each end.

highLow? { high: number; low: number }

The value range of a scale as { high, low }, instead of the one computed from the data.

Properties

chartRect ChartRect

The drawing area, in px.

axisX Axis

The X axis, a 1.x Axis object.

axisY Axis

The Y axis, a 1.x Axis object.

svg Svg

The chart's SVG element, wrapped in Svg.

options TOptions

The options the chart was drawn with, defaults and responsive options applied.

Properties

type string

What was drawn: 'point', 'line', 'bar', 'grid', …

element Svg

The drawn element, wrapped in Svg: change or animate it here.

group Svg

The group the element is in, wrapped in Svg.

chartRect ChartRect

The drawing area, in px.

axisX Axis

The X axis, a 1.x Axis object.

axisY Axis

The Y axis, a 1.x Axis object.

meta any

The meta of the value (or of the series, for lines and areas).

index number

The index of the value in its series (of the series, for lines and areas).

series SeriesObject<SeriesPrimitiveValue> | FlatSeriesValue<FlatSeriesPrimitiveValue> | Series<SeriesPrimitiveValue>

The series as given in the data: an array or a series object.

seriesIndex number

The index of the series in the data.

Properties

type 'initial' | 'update'

'initial' for the first data, 'update' for data set later.

data Data

The data the chart is about to draw (a copy, safe to change).

Properties

previousOptions T

The options before the change.

currentOptions T

The options now in effect.

Properties

element Svg

The drawn element, wrapped in Svg: change or animate it here.

group Svg

The group the element is in, wrapped in Svg.

index number

The index of the value in its series (of the series, for lines and areas).

type 'grid'

Always 'grid'.

axis Axis

The axis the grid line belongs to.

x1 number

The x of the line's start, in px.

y1 number

The y of the line's start, in px.

x2 number

The x of the line's end, in px.

y2 number

The y of the line's end, in px.

Properties

type 'gridBackground'

Always 'gridBackground'.

group Svg

The grid group the background is in.

element Svg

The background rect.

Properties

element Svg

The drawn element, wrapped in Svg: change or animate it here.

group Svg

The group the element is in, wrapped in Svg.

index number

The index of the value in its series (of the series, for lines and areas).

type 'label'

Always 'label'.

axis Axis

The axis the label belongs to.

text Label

The label as shown, after labelInterpolationFnc.

x number

The x of the label's box, in px.

y number

The y of the label's box, in px.

width number

The width of the label's box, in px.

height number

The height of the label's box, in px.