# Charts (Chartist API) > lineChart, barChart and pieChart: a chart from data and options, with the 1.x options and output. ## lineChart *experimental* ```ts function lineChart(target: string | Element, data: LineChartData, options?: LineChartPresetOptions, responsiveOptions?: PresetResponsiveOptions): PresetHandle ``` Creates a line chart with the 1.x options and output, rendered synchronously. Plugins must be v2 plugins; convert 1.x plugins with `fromLegacyPlugin` from `chartist/compat`. Parameters: - `target: string | Element` - `data: LineChartData` - `options?: LineChartPresetOptions` - `responsiveOptions?: PresetResponsiveOptions` ## barChart *experimental* ```ts function barChart(target: string | Element, data: BarChartData, options?: BarChartPresetOptions, responsiveOptions?: PresetResponsiveOptions): PresetHandle ``` Creates a bar chart with the 1.x options and output, rendered synchronously. Plugins must be v2 plugins; convert 1.x plugins with `fromLegacyPlugin` from `chartist/compat`. Parameters: - `target: string | Element` - `data: BarChartData` - `options?: BarChartPresetOptions` - `responsiveOptions?: PresetResponsiveOptions` ## pieChart *experimental* ```ts function pieChart(target: string | Element, data: PieChartData, options?: PieChartPresetOptions, responsiveOptions?: PresetResponsiveOptions): PresetHandle ``` Creates a pie or donut chart with the 1.x options and output, rendered synchronously. Plugins must be v2 plugins; convert 1.x plugins with `fromLegacyPlugin` from `chartist/compat`. Parameters: - `target: string | Element` - `data: PieChartData` - `options?: PieChartPresetOptions` - `responsiveOptions?: PresetResponsiveOptions` ## LineChartData ```ts type LineChartData = Data<(Series | SeriesObject)[]> ``` The data of a line chart: series of values, and labels for the X axis. Properties: - `labels?: Label[]` One label per value position: the steps of the X axis in line and bar charts, the slices in pie charts. - `series: T` The values: an array per series (or a series object with a name, class name and meta), or one flat array for pies and distributed bars. ## LineChartPresetOptions *experimental* ```ts type LineChartPresetOptions = Omit & { … } ``` Options of `lineChart`: the 1.x `LineChart` options; axis types may also be v2 axis factories. 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` The chart's SVG element. Default: `'ct-chart-line'`. - `classNames.label?: string` Each axis label. Default: `'ct-label'`. - `classNames.labelGroup?: string` The group of an axis's labels. Default: `'ct-labels'`. - `classNames.series?: string` The group of each series. Default: `'ct-series'`. - `classNames.line?: string` Each line. Default: `'ct-line'`. - `classNames.point?: string` Each point. Default: `'ct-point'`. - `classNames.area?: string` Each area. Default: `'ct-area'`. - `classNames.grid?: string` Each grid line. Default: `'ct-grid'`. - `classNames.gridGroup?: string` The group of the grid lines. Default: `'ct-grids'`. - `classNames.gridBackground?: string` The grid background (with `showGridBackground`). Default: `'ct-grid-background'`. - `classNames.vertical?: string` Labels and grid lines of the vertical axis. Default: `'ct-vertical'`. - `classNames.horizontal?: string` Labels and grid lines of the horizontal axis. Default: `'ct-horizontal'`. - `classNames.start?: string` Labels at the start of their axis (left or top). Default: `'ct-start'`. - `classNames.end?: string` Labels at the end of their axis (right or bottom). Default: `'ct-end'`. - `showLine?: boolean` Draws the lines. Default: `true`. - `showPoint?: boolean` Draws a point at each value. Default: `true`. - `showArea?: boolean` Fills the area between each line and `areaBase`. Default: `false`. - `areaBase?: number` The value the areas close at, usually 0. Default: `0`. - `lineSmooth?: boolean | LineInterpolation` 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. Default: `true`. - `showGridBackground?: boolean` Fills the grid area with a background (class `ct-grid-background`). Default: `false`. - `fullWidth?: boolean` 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. Default: `false`. - `reverseData?: boolean` Reverses the labels, the order of the series and each series' values. Default: `false`. - `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` 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. Default: `{ top: 15, right: 15, bottom: 5, left: 10 }`. - `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. - `plugins?: readonly PluginEntry[]` v2 plugins; convert 1.x plugins with `fromLegacyPlugin`. - `on?: PhaseListeners` Phase listeners by phase name (or `'*'` for all phases), as `on` in the config of `chart()`. They're registered before the first render, so they see it too. - `on.*?: AllPhasesListener` Listens to every phase, with the phase name as first argument. - `series?: Readonly>` Options per series name: only these five apply per series. - `axisX?: PresetAxisOptions & Omit, 'type'>` Options of the X axis; its `type` may also be a v2 axis factory. - `axisX.low?: number` The lowest value this axis shows, instead of the data's lowest. - `axisX.high?: number` The highest value this axis shows, instead of the data's highest. - `axisX.referenceValue?: number` A value this axis always includes, such as 0. - `axisX.offset?: number` Room in px for the axis labels, between the drawing area and the chart's edge. Default: `30`. - `axisX.position?: 'end' | 'start'` Where the labels go: `start` (left or top) or `end` (right or bottom). Default: `'end'`. - `axisX.labelOffset?: { … }` Moves the labels by `x` and `y` px from where they'd go. Default: `{ x: 0, y: 0 }`. - `axisX.showLabel?: boolean` Draws the axis labels. Default: `true`. - `axisX.showGrid?: boolean` Draws the grid lines of the axis. Default: `true`. - `axisX.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. - `axisX.scaleMinSpace?: number` The minimum space in px between two grid lines of a scale: the scale takes fewer, larger steps to keep it. - `axisX.onlyInteger?: boolean` Only whole numbers on the scale. - `axisX.ticks?: Label[]` The ticks: the labels of a step axis, or the values of a fixed scale axis. - `axisX.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). - `axisX.divisor?: number` Fixed scale axis without `ticks`: the number of equal steps between its low and high, with a tick at each end. - `axisX.highLow?: { … }` The value range of a scale as `{ high, low }`, instead of the one computed from the data. - `axisX.type?: AxisSetup['type']` A v2 axis factory or a 1.x axis class. - `axisY?: PresetAxisOptions & Omit, 'type'>` Options of the Y axis; its `type` may also be a v2 axis factory. - `axisY.low?: number` The lowest value this axis shows, instead of the data's lowest. - `axisY.high?: number` The highest value this axis shows, instead of the data's highest. - `axisY.referenceValue?: number` A value this axis always includes, such as 0. - `axisY.offset?: number` Room in px for the axis labels, between the drawing area and the chart's edge. Default: `40`. - `axisY.position?: 'end' | 'start'` Where the labels go: `start` (left or top) or `end` (right or bottom). Default: `'start'`. - `axisY.labelOffset?: { … }` Moves the labels by `x` and `y` px from where they'd go. Default: `{ x: 0, y: 0 }`. - `axisY.showLabel?: boolean` Draws the axis labels. Default: `true`. - `axisY.showGrid?: boolean` Draws the grid lines of the axis. Default: `true`. - `axisY.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. - `axisY.scaleMinSpace?: number` The minimum space in px between two grid lines of a scale: the scale takes fewer, larger steps to keep it. Default: `20`. - `axisY.onlyInteger?: boolean` Only whole numbers on the scale. Default: `false`. - `axisY.ticks?: Label[]` The ticks: the labels of a step axis, or the values of a fixed scale axis. - `axisY.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). - `axisY.divisor?: number` Fixed scale axis without `ticks`: the number of equal steps between its low and high, with a tick at each end. - `axisY.highLow?: { … }` The value range of a scale as `{ high, low }`, instead of the one computed from the data. - `axisY.type?: AxisSetup['type']` A v2 axis factory or a 1.x axis class. - `labels?: LabelMode` HTML (1.x) or SVG text labels; default: the renderer's mode. ## BarChartData ```ts type BarChartData = Data ``` The data of a bar chart: series of values, and labels for the bar groups. Properties: - `labels?: Label[]` One label per value position: the steps of the X axis in line and bar charts, the slices in pie charts. - `series: T` The values: an array per series (or a series object with a name, class name and meta), or one flat array for pies and distributed bars. ## BarChartPresetOptions *experimental* ```ts type BarChartPresetOptions = Omit & { … } ``` Options of `barChart`: the 1.x `BarChart` options; axis types may also be v2 axis factories. 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` The chart's SVG element. Default: `'ct-chart-bar'`. - `classNames.horizontalBars?: string` The chart's SVG element, with `horizontalBars`. Default: `'ct-horizontal-bars'`. - `classNames.label?: string` Each axis label. Default: `'ct-label'`. - `classNames.labelGroup?: string` The group of an axis's labels. Default: `'ct-labels'`. - `classNames.series?: string` The group of each series. Default: `'ct-series'`. - `classNames.bar?: string` Each bar. Default: `'ct-bar'`. - `classNames.grid?: string` Each grid line. Default: `'ct-grid'`. - `classNames.gridGroup?: string` The group of the grid lines. Default: `'ct-grids'`. - `classNames.gridBackground?: string` The grid background (with `showGridBackground`). Default: `'ct-grid-background'`. - `classNames.vertical?: string` Labels and grid lines of the vertical axis. Default: `'ct-vertical'`. - `classNames.horizontal?: string` Labels and grid lines of the horizontal axis. Default: `'ct-horizontal'`. - `classNames.start?: string` Labels at the start of their axis (left or top). Default: `'ct-start'`. - `classNames.end?: string` Labels at the end of their axis (right or bottom). Default: `'ct-end'`. - `seriesBarDistance?: number` The distance in px between the bars of a group (one bar per series). Default: `15`. - `stackBars?: boolean` Stacks the bars of a group on each other; `stackMode` says how. Default: `false`. - `horizontalBars?: boolean` Draws horizontal bars. The axes swap: the Y axis shows the labels and the X axis the values, so swap their options too. Default: `false`. - `distributeSeries?: boolean` Treats one flat array of values as one series per value, each in its own color: a profile rather than values over time. Default: `false`. - `reverseData?: boolean` Reverses the labels, the order of the series and each series' values. Default: `false`. - `showGridBackground?: boolean` Fills the grid area with a background (class `ct-grid-background`). Default: `false`. - `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. Default: `0`. - `chartPadding?: number | Partial` 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. Default: `{ top: 15, right: 15, bottom: 5, left: 10 }`. - `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. - `plugins?: readonly PluginEntry[]` v2 plugins; convert 1.x plugins with `fromLegacyPlugin`. - `on?: PhaseListeners` Phase listeners by phase name (or `'*'` for all phases), as `on` in the config of `chart()`. They're registered before the first render, so they see it too. - `on.*?: AllPhasesListener` Listens to every phase, with the phase name as first argument. - `stackMode?: 'accumulate' | 'accumulate-relative' | 'overlap' | boolean` How stacked bars stack: `accumulate` (default), `accumulate-relative` (positives up, negatives down), or `overlap` (also `true`): every bar from zero. Default: `'accumulate'`. - `axisX?: PresetAxisOptions & Omit, 'type'>` Options of the X axis; its `type` may also be a v2 axis factory. - `axisX.low?: number` The lowest value this axis shows, instead of the data's lowest. - `axisX.high?: number` The highest value this axis shows, instead of the data's highest. - `axisX.referenceValue?: number` A value this axis always includes, such as 0. - `axisX.offset?: number` Room in px for the axis labels, between the drawing area and the chart's edge. Default: `30`. - `axisX.position?: 'end' | 'start'` Where the labels go: `start` (left or top) or `end` (right or bottom). Default: `'end'`. - `axisX.labelOffset?: { … }` Moves the labels by `x` and `y` px from where they'd go. Default: `{ x: 0, y: 0 }`. - `axisX.showLabel?: boolean` Draws the axis labels. Default: `true`. - `axisX.showGrid?: boolean` Draws the grid lines of the axis. Default: `true`. - `axisX.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. - `axisX.scaleMinSpace?: number` The minimum space in px between two grid lines of a scale: the scale takes fewer, larger steps to keep it. Default: `30`. - `axisX.onlyInteger?: boolean` Only whole numbers on the scale. Default: `false`. - `axisX.ticks?: Label[]` The ticks: the labels of a step axis, or the values of a fixed scale axis. - `axisX.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). - `axisX.divisor?: number` Fixed scale axis without `ticks`: the number of equal steps between its low and high, with a tick at each end. - `axisX.highLow?: { … }` The value range of a scale as `{ high, low }`, instead of the one computed from the data. - `axisX.type?: AxisSetup['type']` A v2 axis factory or a 1.x axis class. - `axisY?: PresetAxisOptions & Omit, 'type'>` Options of the Y axis; its `type` may also be a v2 axis factory. - `axisY.low?: number` The lowest value this axis shows, instead of the data's lowest. - `axisY.high?: number` The highest value this axis shows, instead of the data's highest. - `axisY.referenceValue?: number` A value this axis always includes, such as 0. - `axisY.offset?: number` Room in px for the axis labels, between the drawing area and the chart's edge. Default: `40`. - `axisY.position?: 'end' | 'start'` Where the labels go: `start` (left or top) or `end` (right or bottom). Default: `'start'`. - `axisY.labelOffset?: { … }` Moves the labels by `x` and `y` px from where they'd go. Default: `{ x: 0, y: 0 }`. - `axisY.showLabel?: boolean` Draws the axis labels. Default: `true`. - `axisY.showGrid?: boolean` Draws the grid lines of the axis. Default: `true`. - `axisY.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. - `axisY.scaleMinSpace?: number` The minimum space in px between two grid lines of a scale: the scale takes fewer, larger steps to keep it. Default: `20`. - `axisY.onlyInteger?: boolean` Only whole numbers on the scale. Default: `false`. - `axisY.ticks?: Label[]` The ticks: the labels of a step axis, or the values of a fixed scale axis. - `axisY.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). - `axisY.divisor?: number` Fixed scale axis without `ticks`: the number of equal steps between its low and high, with a tick at each end. - `axisY.highLow?: { … }` The value range of a scale as `{ high, low }`, instead of the one computed from the data. - `axisY.type?: AxisSetup['type']` A v2 axis factory or a 1.x axis class. - `labels?: LabelMode` HTML (1.x) or SVG text labels; default: the renderer's mode. ## PieChartData ```ts type PieChartData = Data ``` The data of a pie chart: one value per slice, and labels for the slices. Properties: - `labels?: Label[]` One label per value position: the steps of the X axis in line and bar charts, the slices in pie charts. - `series: T` The values: an array per series (or a series object with a name, class name and meta), or one flat array for pies and distributed bars. ## PieChartPresetOptions *experimental* ```ts type PieChartPresetOptions = Omit & { … } ``` Options of `pieChart`: the 1.x `PieChart` options, with v2 plugins and phase listeners. 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` The chart's SVG element, for pies. Default: `'ct-chart-pie'`. - `classNames.chartDonut?: string` The chart's SVG element, for donuts. Default: `'ct-chart-donut'`. - `classNames.series?: string` The group of each series. Default: `'ct-series'`. - `classNames.slicePie?: string` Each pie slice. Default: `'ct-slice-pie'`. - `classNames.sliceDonut?: string` Each donut slice. Default: `'ct-slice-donut'`. - `classNames.label?: string` Each axis label. Default: `'ct-label'`. - `startAngle?: number` Where the first slice starts, in degrees clockwise from the top. Default: `0`. - `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` Draws a donut: rings instead of filled slices. Default: `false`. - `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` Draws a label for each slice. Default: `true`. - `labelOffset?: number` Moves the labels away from the center (positive) or toward it (negative), in px. Default: `0`. - `labelPosition?: RadialLabelPosition` 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`). Default: `'inside'`. - `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` Which way labels anchor: `neutral`, `explode` (away from the center, for labels outside the pie) or `implode` (toward it). Default: `'neutral'`. - `ignoreEmptyValues?: boolean` Leaves out the slices and labels of empty values. Default: `false`. - `preventOverlappingLabelOffset?: number` 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. Default: `0`. - `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` 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. Default: `{ top: 5, right: 5, bottom: 5, left: 5 }`. - `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. - `plugins?: readonly PluginEntry[]` v2 plugins; convert 1.x plugins with `fromLegacyPlugin`. - `on?: PhaseListeners` Phase listeners by phase name (or `'*'` for all phases), as `on` in the config of `chart()`. They're registered before the first render, so they see it too. - `on.*?: AllPhasesListener` Listens to every phase, with the phase name as first argument. ## barChartConfig *experimental* ```ts function barChartConfig(data: BarChartData, options?: BarChartPresetOptions): ChartConfig ``` Builds the chart config that `barChart()` renders for the data and options, without a container: the bar layer with its axes, grid and labels, horizontal or stacked as the options say. Pass it to `toScene()` to render the preset chart with another renderer. Responsive options and the inline size style of the root svg are left out; both need a container. Parameters: - `data: BarChartData` - `options?: BarChartPresetOptions` ## lineChartConfig *experimental* ```ts function lineChartConfig(data: LineChartData, options?: LineChartPresetOptions): ChartConfig ``` Builds the chart config that `lineChart()` renders for the data and options, without a container: the line layer with its axes, grid and labels. Pass it to `toScene()` to render the preset chart with another renderer. Responsive options and the inline size style of the root svg are left out; both need a container. Parameters: - `data: LineChartData` - `options?: LineChartPresetOptions` ```ts import { lineChartConfig, renderToString, toScene } from 'chartist'; const config = lineChartConfig( { labels: ['Mon', 'Tue', 'Wed'], series: [[5, 2, 4]] }, { showArea: true } ); export const svg = renderToString( toScene(config, { width: 600, height: 300 }) ); ``` ## pieChartConfig *experimental* ```ts function pieChartConfig(data: PieChartData, options?: PieChartPresetOptions): ChartConfig ``` Builds the chart config that `pieChart()` renders for the data and options, without a container: the pie layer with its labels. Pass it to `toScene()` to render the preset chart with another renderer. Responsive options and the inline size style of the root svg are left out; both need a container. Parameters: - `data: PieChartData` - `options?: PieChartPresetOptions` ## BarPresetState ```ts type BarPresetState = PresetState ``` What the bar preset passes to plugins as `ResolvedConfig.preset`. Properties: - `kind: TKind` Which preset: `line`, `bar` or `pie`. - `options: TOptions` The current options: the given ones over the defaults, with the matching responsive options applied. - `data: TData` The current data. - `update: (data?: TData, options?: TOptions, override?: boolean) => void` Changes the data, the options or both and redraws, as 1.x `update()`: the options extend the current ones, or with `override`, the defaults. - `detach: () => void` Stops the chart's responsive updates, as 1.x `detach()`. ## LinePresetState ```ts type LinePresetState = PresetState ``` What the line preset passes to plugins as `ResolvedConfig.preset`. Properties: - `kind: TKind` Which preset: `line`, `bar` or `pie`. - `options: TOptions` The current options: the given ones over the defaults, with the matching responsive options applied. - `data: TData` The current data. - `update: (data?: TData, options?: TOptions, override?: boolean) => void` Changes the data, the options or both and redraws, as 1.x `update()`: the options extend the current ones, or with `override`, the defaults. - `detach: () => void` Stops the chart's responsive updates, as 1.x `detach()`. ## PiePresetState ```ts type PiePresetState = PresetState ``` What the pie preset passes to plugins as `ResolvedConfig.preset`. Properties: - `kind: TKind` Which preset: `line`, `bar` or `pie`. - `options: TOptions` The current options: the given ones over the defaults, with the matching responsive options applied. - `data: TData` The current data. - `update: (data?: TData, options?: TOptions, override?: boolean) => void` Changes the data, the options or both and redraws, as 1.x `update()`: the options extend the current ones, or with `override`, the defaults. - `detach: () => void` Stops the chart's responsive updates, as 1.x `detach()`. ## PresetState ```ts interface PresetState ``` What a preset passes to plugins as `ResolvedConfig.preset`: its kind, the current 1.x options and 1.x-style updates. Properties: - `kind: TKind` Which preset: `line`, `bar` or `pie`. - `options: TOptions` The current options: the given ones over the defaults, with the matching responsive options applied. - `data: TData` The current data. - `update: (data?: TData, options?: TOptions, override?: boolean) => void` Changes the data, the options or both and redraws, as 1.x `update()`: the options extend the current ones, or with `override`, the defaults. - `detach: () => void` Stops the chart's responsive updates, as 1.x `detach()`. ## PresetHandle *experimental* ```ts interface PresetHandle extends ChartHandle ``` The handle `lineChart`, `barChart` and `pieChart` return: a [`ChartHandle`](https://chartist.dev/api/chart/#ChartHandle) that also changes the chart's options. `update({ data })` changes the preset's data too, so responsive changes redraw with it. Properties: - `container?: Element` The element the chart renders into (undefined in `toScene`). - `update: (config: Partial>) => this` Shallow-merges the changes into the config and renders again. Plugins and listeners stay; `plugins` and `on` can't change. - `detach: () => this` Stops reacting to container size changes (and media queries in presets). The output and the listeners stay. - `destroy: () => void` Detaches, removes the output and clears all listeners. - `emit: (name: K, payload: ChartEvents[K]) => void` Emits a custom event (declared in [`ChartEvents`](https://chartist.dev/api/events-and-plugins/#ChartEvents)), e.g. from a plugin. Phase names are reserved: emitting one throws. - `on: (name: K, listener: PhaseListener) => this` Listens to a phase event, which fires on every render. Listeners of `resolve` to `scene` may return a new payload to change what's drawn; `compose` listeners may return `null` to drop a node. - `off: (name: K, listener?: PhaseListener) => this` Removes a phase listener, whoever added it. Without a listener, removes the listeners of the phase added through `on` and the config's `on`; plugins keep theirs. - `setOptions: (options: Omit, how?: { readonly replace?: boolean }) => this` Changes the options and redraws: they extend the current options, or with `{ replace: true }`, the defaults, dropping the options given before. Matching responsive options still apply on top. `plugins` and `on` can't change. Coming from 1.x, `setOptions(options)` is `update(undefined, options, true)` and `setOptions(options, { replace: true })` is `update(undefined, options)`. ```ts import { lineChart } from 'chartist'; const chart = lineChart('#chart', { series: [[1, 3, 2, 5]] }); // Areas from now on; the other options stay. chart.setOptions({ showArea: true }); ``` ## PresetAxisOptions ```ts type PresetAxisOptions = Omit & { … } ``` 1.x axis options whose `type` may also be a v2 axis factory. Properties: - `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?: { … }` 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?: { … }` The value range of a scale as `{ high, low }`, instead of the one computed from the data. - `type?: AxisSetup['type']` A v2 axis factory or a 1.x axis class. ## PresetResponsiveOptions *experimental* ```ts type PresetResponsiveOptions = readonly ResponsiveEntry[] ``` Responsive options of presets: the 1.x media query pairs, plus container conditions (`container()`). Matching entries extend the options in order.