# 1.x classes (Chartist API) > LineChart, BarChart and PieChart as in 1.x, with their options, axis classes, events and drawing helpers. Deprecated, and removed from chartist in 3.0: new code uses the chart functions. ## LineChart *1.x* ```ts class LineChart extends PresetChart ``` The 1.x line chart class: a wrapper over the `lineChart` preset with the 1.x API. 1.x events and 1.x plugin functions need the compat plugin (`chartist/compat`). See also: [`lineChart`](https://chartist.dev/api/charts/#lineChart) for the v2 functional API. ## BarChart *1.x* ```ts class BarChart extends PresetChart ``` The 1.x bar chart class: a wrapper over the `barChart` preset with the 1.x API. 1.x events and 1.x plugin functions need the compat plugin (`chartist/compat`). See also: [`barChart`](https://chartist.dev/api/charts/#barChart) for the v2 functional API. ## PieChart *1.x* ```ts class PieChart extends PresetChart ``` The 1.x pie chart class: a wrapper over the `pieChart` preset with the 1.x API. 1.x events and 1.x plugin functions need the compat plugin (`chartist/compat`). See also: [`pieChart`](https://chartist.dev/api/charts/#pieChart) for the v2 functional API. ## BaseChart *1.x* ```ts class BaseChart ``` The base class of the 1.x chart classes ([`LineChart`](https://chartist.dev/api/classes/#LineChart), [`BarChart`](https://chartist.dev/api/classes/#BarChart), [`PieChart`](https://chartist.dev/api/classes/#PieChart)): the container, `update`, `detach`, `on` and `off`. ## getSeriesOption *1.x* ```ts function getSeriesOption(series: Series | SeriesObject, options: LineChartOptionsWithDefaults, key: T): LineChartOptionsWithDefaults[T] ``` Reads a line chart option for a series: the per-series value from `options.series[name]` if the series has a name and sets it, the chart's value otherwise. Parameters: - `series: Series | SeriesObject` - `options: LineChartOptionsWithDefaults` - `key: T` ## createSvg *1.x* ```ts function createSvg(container: Element, width?: string | number, height?: string | number, className?: string, viewBox?: ViewBox): Svg ``` Create or reinitialize the SVG element for the chart Parameters: - `container: Element` The containing DOM Node object that will be used to plant the SVG element - `width?: string | number` Set the width of the SVG element. Default is 100% - `height?: string | number` 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: The created/reinitialized SVG element ## createGrid *1.x* ```ts function createGrid(position: number, index: number, axis: Axis, offset: number, length: number, group: Svg, classes: string[], eventEmitter: EventEmitter): void ``` Creates a grid line based on a projected value. Parameters: - `position: number` - `index: number` - `axis: Axis` - `offset: number` - `length: number` - `group: Svg` - `classes: string[]` - `eventEmitter: EventEmitter` ## createGridBackground *1.x* ```ts function createGridBackground(gridGroup: Svg, chartRect: ChartRect, className: string, eventEmitter: EventEmitter): void ``` Creates a grid background rect and emits the draw event. Parameters: - `gridGroup: Svg` - `chartRect: ChartRect` - `className: string` - `eventEmitter: EventEmitter` ## createLabel *1.x* ```ts function createLabel(position: number, length: number, index: number, label: Label, axis: Axis, axisOffset: number, labelOffset: { x: number; y: number }, group: Svg, classes: string[], eventEmitter: EventEmitter): void ``` Creates a label based on a projected value and an axis. Parameters: - `position: number` - `length: number` - `index: number` - `label: Label` - `axis: Axis` - `axisOffset: number` - `labelOffset: { x: number; y: number }` - `group: Svg` - `classes: string[]` - `eventEmitter: EventEmitter` ## optionsProvider *1.x* ```ts function optionsProvider(options: T, responsiveOptions: ResponsiveOptions | undefined, eventEmitter: EventEmitter): OptionsProvider ``` Provides options handling functionality with callback for options changes triggered by responsive options and media query matches Parameters: - `options: T` Options set by user - `responsiveOptions: ResponsiveOptions | 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: The consolidated options object from the defaults, base and matching responsive options ## AutoScaleAxis *1.x* ```ts class AutoScaleAxis extends Axis ``` The 1.x axis with a scale fitted to the values, in round steps at least `scaleMinSpace` px apart. ## Axis *1.x* ```ts class Axis ``` The base class of the 1.x axes: projects values to px along the drawing area and draws its grid lines and labels. ## FixedScaleAxis *1.x* ```ts class FixedScaleAxis extends Axis ``` The 1.x axis with fixed ticks: the `ticks` option, or `divisor` equal steps from low to high, with a tick at both ends. ## StepAxis *1.x* ```ts class StepAxis extends Axis ``` The 1.x axis with one step per tick, such as the labels of a line chart's X axis. ## EventEmitter *1.x* ```ts class EventEmitter ``` The 1.x event emitter: `on`, `off` and `emit` by event name, with `'*'` for all events. ## AxisType *1.x* ```ts type AxisType = typeof AutoScaleAxis | typeof FixedScaleAxis | typeof StepAxis ``` The 1.x axis classes an axis's `type` option takes: [`AutoScaleAxis`](https://chartist.dev/api/classes/#AutoScaleAxis), [`FixedScaleAxis`](https://chartist.dev/api/classes/#FixedScaleAxis) or [`StepAxis`](https://chartist.dev/api/classes/#StepAxis). ## BarChartOptions *1.x* ```ts interface BarChartOptions extends Options ``` The options of a bar chart (1.x `BarChart`, and `barChart`). 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`. - `stackMode?: boolean | 'accumulate' | 'accumulate-relative'` 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. Default: `'accumulate'`. - `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 }`. - `axisX?: TXAxisOptions` Options of the X axis. Default: `{ offset: 30, position: 'end', labelOffset: { x: 0, y: 0 }, showLabel: true, showGrid: true, scaleMinSpace: 30, onlyInteger: false }`. - `axisY?: TYAxisOptions` Options of the Y axis. Default: `{ offset: 40, position: 'start', labelOffset: { x: 0, y: 0 }, showLabel: true, showGrid: true, scaleMinSpace: 20, onlyInteger: false }`. - `plugins?: (Plugin | [Plugin, any] | { … })[]` 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. ## BarChartOptionsWithDefaults *1.x* ```ts type BarChartOptionsWithDefaults = RequiredKeys, RequiredKeys>, 'referenceValue' | 'chartPadding' | 'seriesBarDistance' | 'stackMode' | 'axisX' | 'axisY', 'classNames'> ``` [`BarChartOptions`](https://chartist.dev/api/classes/#BarChartOptions) after the defaults are applied: the 1.x `BarChart` works with these. ## BarChartCreatedEvent *1.x* ```ts type BarChartCreatedEvent = CreatedEvent ``` The payload of a bar chart's 1.x `created` event. Properties: - `chartRect: ChartRect` The drawing area, in px. - `axisX: Axis` The X axis, a 1.x [`Axis`](https://chartist.dev/api/classes/#Axis) object. - `axisY: Axis` The Y axis, a 1.x [`Axis`](https://chartist.dev/api/classes/#Axis) object. - `svg: Svg` The chart's SVG element, wrapped in [`Svg`](https://chartist.dev/api/svg/#Svg). - `options: TOptions` The options the chart was drawn with, defaults and responsive options applied. ## BarDrawEvent *1.x* ```ts interface BarDrawEvent extends DrawEvent ``` The 1.x `draw` event of a bar, one per value. The bar is a `line` element from its base (`x1`, `y1`) to its value (`x2`, `y2`). 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`](https://chartist.dev/api/svg/#Svg): change or animate it here. - `group: Svg` The group the element is in, wrapped in [`Svg`](https://chartist.dev/api/svg/#Svg). - `chartRect: ChartRect` The drawing area, in px. - `axisX: Axis` The X axis, a 1.x [`Axis`](https://chartist.dev/api/classes/#Axis) object. - `axisY: Axis` The Y axis, a 1.x [`Axis`](https://chartist.dev/api/classes/#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 | FlatSeriesValue | Series` The series as given in the data: an array or a series object. - `seriesIndex: number` The index of the series in the data. ## BarChartEventsTypes *1.x* ```ts type BarChartEventsTypes = BaseChartEventsTypes ``` The 1.x events of a [`BarChart`](https://chartist.dev/api/classes/#BarChart) and their payloads, by event name. Properties: - `data: DataEvent` - `options: OptionsChangedEvent` - `animationBegin: AnimationEvent` - `animationEnd: AnimationEvent` - `created: TCreateEvent` - `draw: TDrawEvents` ## LineInterpolation *1.x* ```ts type LineInterpolation = (pathCoordinates: number[], valueData: SegmentData[]) => SvgPath ``` Turns a series' points into the path of its line (see `Interpolation`). ## LineChartOptions *1.x* ```ts interface LineChartOptions extends Options ``` The options of a line chart (1.x `LineChart`, and `lineChart`). 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`. - `series?: Record, '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` 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 }`. - `axisX?: TXAxisOptions` Options of the X axis. Default: `{ offset: 30, position: 'end', labelOffset: { x: 0, y: 0 }, showLabel: true, showGrid: true }`. - `axisY?: TYAxisOptions` Options of the Y axis. Default: `{ offset: 40, position: 'start', labelOffset: { x: 0, y: 0 }, showLabel: true, showGrid: true, scaleMinSpace: 20, onlyInteger: false }`. - `plugins?: (Plugin | [Plugin, any] | { … })[]` 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. ## LineChartOptionsWithDefaults *1.x* ```ts type LineChartOptionsWithDefaults = RequiredKeys, RequiredKeys>, 'showLine' | 'showPoint' | 'areaBase' | 'lineSmooth' | 'chartPadding' | 'axisX' | 'axisY', 'classNames'> ``` [`LineChartOptions`](https://chartist.dev/api/classes/#LineChartOptions) after the defaults are applied: the 1.x `LineChart` works with these. ## LineChartCreatedEvent *1.x* ```ts type LineChartCreatedEvent = CreatedEvent ``` The payload of a line chart's 1.x `created` event. Properties: - `chartRect: ChartRect` The drawing area, in px. - `axisX: Axis` The X axis, a 1.x [`Axis`](https://chartist.dev/api/classes/#Axis) object. - `axisY: Axis` The Y axis, a 1.x [`Axis`](https://chartist.dev/api/classes/#Axis) object. - `svg: Svg` The chart's SVG element, wrapped in [`Svg`](https://chartist.dev/api/svg/#Svg). - `options: TOptions` The options the chart was drawn with, defaults and responsive options applied. ## PointDrawEvent *1.x* ```ts interface PointDrawEvent extends DrawEvent ``` The 1.x `draw` event of a line chart's point, one per value. The point is a very short `line` element at `x`, `y` (CSS gives it a round cap). 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`](https://chartist.dev/api/svg/#Svg): change or animate it here. - `group: Svg` The group the element is in, wrapped in [`Svg`](https://chartist.dev/api/svg/#Svg). - `chartRect: ChartRect` The drawing area, in px. - `axisX: Axis` The X axis, a 1.x [`Axis`](https://chartist.dev/api/classes/#Axis) object. - `axisY: Axis` The Y axis, a 1.x [`Axis`](https://chartist.dev/api/classes/#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 | FlatSeriesValue | Series` The series as given in the data: an array or a series object. - `seriesIndex: number` The index of the series in the data. ## LineDrawEvent *1.x* ```ts interface LineDrawEvent extends DrawEvent ``` The 1.x `draw` event of a line, one per series. `index` is the series' index and `meta` the series' meta. 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`](https://chartist.dev/api/svg/#Svg): change or animate it here. - `group: Svg` The group the element is in, wrapped in [`Svg`](https://chartist.dev/api/svg/#Svg). - `chartRect: ChartRect` The drawing area, in px. - `axisX: Axis` The X axis, a 1.x [`Axis`](https://chartist.dev/api/classes/#Axis) object. - `axisY: Axis` The Y axis, a 1.x [`Axis`](https://chartist.dev/api/classes/#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 | FlatSeriesValue | Series` The series as given in the data: an array or a series object. - `seriesIndex: number` The index of the series in the data. ## AreaDrawEvent *1.x* ```ts interface AreaDrawEvent extends DrawEvent ``` The 1.x `draw` event of an area (with `showArea`), one per series and segment. `index` is the series' index and `meta` the series' meta. 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`](https://chartist.dev/api/svg/#Svg): change or animate it here. - `group: Svg` The group the element is in, wrapped in [`Svg`](https://chartist.dev/api/svg/#Svg). - `chartRect: ChartRect` The drawing area, in px. - `axisX: Axis` The X axis, a 1.x [`Axis`](https://chartist.dev/api/classes/#Axis) object. - `axisY: Axis` The Y axis, a 1.x [`Axis`](https://chartist.dev/api/classes/#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 | FlatSeriesValue | Series` The series as given in the data: an array or a series object. - `seriesIndex: number` The index of the series in the data. ## LineChartEventsTypes *1.x* ```ts type LineChartEventsTypes = BaseChartEventsTypes ``` The 1.x events of a [`LineChart`](https://chartist.dev/api/classes/#LineChart) and their payloads, by event name. Properties: - `data: DataEvent` - `options: OptionsChangedEvent` - `animationBegin: AnimationEvent` - `animationEnd: AnimationEvent` - `created: TCreateEvent` - `draw: TDrawEvents` ## LabelDirection *1.x* ```ts type LabelDirection = 'implode' | 'neutral' | 'explode' ``` Which way pie labels anchor: see `labelDirection` in [`PieChartOptions`](https://chartist.dev/api/classes/#PieChartOptions). ## AnchorPosition *1.x* ```ts type AnchorPosition = 'start' | 'middle' | 'end' ``` The `text-anchor` of a pie label: `'start'`, `'middle'` or `'end'`. ## RadialLabelPosition *1.x* ```ts type RadialLabelPosition = 'inside' | 'center' | 'outside' ``` Where pie labels go: see `labelPosition` in [`PieChartOptions`](https://chartist.dev/api/classes/#PieChartOptions). ## Dot *1.x* ```ts interface Dot ``` A point in px, such as the center of a pie. Properties: - `x: number` The x, in px. - `y: number` The y, in px. ## PieChartOptions *1.x* ```ts interface PieChartOptions extends Omit ``` The options of a pie or donut chart (1.x `PieChart`, and `pieChart`). 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 }`. - `plugins?: (Plugin | [Plugin, any] | { … })[]` 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. ## PieChartOptionsWithDefaults *1.x* ```ts type PieChartOptionsWithDefaults = RequiredKeys ``` [`PieChartOptions`](https://chartist.dev/api/classes/#PieChartOptions) after the defaults are applied: the 1.x `PieChart` works with these. ## PieChartCreatedEvent *1.x* ```ts type PieChartCreatedEvent = Omit, 'axisX' | 'axisY'> ``` The payload of a pie chart's 1.x `created` event: as for other charts, without axes. Properties: - `chartRect: ChartRect` The drawing area, in px. - `svg: Svg` The chart's SVG element, wrapped in [`Svg`](https://chartist.dev/api/svg/#Svg). - `options: TOptions` The options the chart was drawn with, defaults and responsive options applied. ## SliceDrawEvent *1.x* ```ts interface SliceDrawEvent extends Omit ``` The 1.x `draw` event of a pie or donut slice, one per value. `index` is the slice's index and `series` its value as given in the data. 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`](https://chartist.dev/api/svg/#Svg): change or animate it here. - `group: Svg` The group the element is in, wrapped in [`Svg`](https://chartist.dev/api/svg/#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 | FlatSeriesValue | Series` The series as given in the data: an array or a series object. ## SliceLabelDrawEvent *1.x* ```ts interface SliceLabelDrawEvent extends Omit ``` The 1.x `draw` event of a pie slice's label. `index` is the slice's index; the label is a `text` element anchored at `x`, `y`. 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`](https://chartist.dev/api/svg/#Svg): change or animate it here. - `group: Svg` The group the element is in, wrapped in [`Svg`](https://chartist.dev/api/svg/#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 | FlatSeriesValue | Series` The series as given in the data: an array or a series object. ## PieChartEventsTypes *1.x* ```ts type PieChartEventsTypes = BaseChartEventsTypes ``` The 1.x events of a [`PieChart`](https://chartist.dev/api/classes/#PieChart) and their payloads, by event name. Properties: - `data: DataEvent` - `options: OptionsChangedEvent` - `animationBegin: AnimationEvent` - `animationEnd: AnimationEvent` - `created: TCreateEvent` - `draw: TDrawEvents` ## BaseChartEventsTypes *1.x* ```ts interface BaseChartEventsTypes ``` The 1.x events every chart class emits and their payloads, by event name. Properties: - `data: DataEvent` - `options: OptionsChangedEvent` - `animationBegin: AnimationEvent` - `animationEnd: AnimationEvent` - `created: TCreateEvent` - `draw: TDrawEvents` ## OptionsProvider *1.x* ```ts interface OptionsProvider ``` What [`optionsProvider`](https://chartist.dev/api/classes/#optionsProvider) returns: the current options, and a way to stop listening to media queries. Properties: - `removeMediaQueryListeners: () => void` - `getCurrentOptions: () => T` ## ChartPadding *1.x* ```ts interface ChartPadding ``` Space in px between the chart's edges and its drawing area, per side. 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. ## Plugin *1.x* ```ts type Plugin = (chart: any, options?: any) => void ``` A 1.x plugin: a function that gets the chart object (and its options) and registers listeners with `chart.on('draw', …)`. It runs with the `compat` plugin from `chartist/compat`, whose `fromLegacyPlugin()` also turns it into a v2 plugin. ## Options *1.x* ```ts interface Options ``` The options all 1.x charts share: size, value range, padding, axes, class names and plugins. [`LineChartOptions`](https://chartist.dev/api/classes/#LineChartOptions), [`BarChartOptions`](https://chartist.dev/api/classes/#BarChartOptions) and [`PieChartOptions`](https://chartist.dev/api/classes/#PieChartOptions) build on them. 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` 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` The class names of the chart's elements, to style a chart with your own classes instead of Chartist's. - `plugins?: (Plugin | [Plugin, any] | { … })[]` 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. ## AxisOptions *1.x* ```ts interface AxisOptions ``` The options of one axis of a line or bar chart. 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?: { … }` 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. ## OptionsWithDefaults *1.x* ```ts type OptionsWithDefaults = RequiredKeys, RequiredKeys>, 'axisX' | 'axisY' | 'classNames'> ``` [`Options`](https://chartist.dev/api/classes/#Options) after the defaults are applied: the axes and class names are set. ## ResponsiveOptions *1.x* ```ts type ResponsiveOptions = [string, T][] ``` The 1.x responsive options: `[mediaQuery, options]` pairs, applied over the chart's options while the media query matches. ## CreatedEvent *1.x* ```ts interface CreatedEvent ``` The payload of the 1.x `created` event, emitted once a chart is drawn: its SVG, drawing area, axes and options. Properties: - `chartRect: ChartRect` The drawing area, in px. - `axisX: Axis` The X axis, a 1.x [`Axis`](https://chartist.dev/api/classes/#Axis) object. - `axisY: Axis` The Y axis, a 1.x [`Axis`](https://chartist.dev/api/classes/#Axis) object. - `svg: Svg` The chart's SVG element, wrapped in [`Svg`](https://chartist.dev/api/svg/#Svg). - `options: TOptions` The options the chart was drawn with, defaults and responsive options applied. ## DrawEvent *1.x* ```ts interface DrawEvent ``` The fields every 1.x `draw` event shares. A `draw` listener gets one per element drawn; check `type` to tell them apart. Properties: - `type: string` What was drawn: `'point'`, `'line'`, `'bar'`, `'grid'`, … - `element: Svg` The drawn element, wrapped in [`Svg`](https://chartist.dev/api/svg/#Svg): change or animate it here. - `group: Svg` The group the element is in, wrapped in [`Svg`](https://chartist.dev/api/svg/#Svg). - `chartRect: ChartRect` The drawing area, in px. - `axisX: Axis` The X axis, a 1.x [`Axis`](https://chartist.dev/api/classes/#Axis) object. - `axisY: Axis` The Y axis, a 1.x [`Axis`](https://chartist.dev/api/classes/#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 | FlatSeriesValue | Series` The series as given in the data: an array or a series object. - `seriesIndex: number` The index of the series in the data. ## DataEvent *1.x* ```ts interface DataEvent ``` The payload of the 1.x `data` event, emitted before a chart draws new data. Listeners may change `data` in place to transform it. 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). ## OptionsChangedEvent *1.x* ```ts interface OptionsChangedEvent ``` The payload of the 1.x `optionsChanged` event, emitted when a responsive option starts or stops applying. Properties: - `previousOptions: T` The options before the change. - `currentOptions: T` The options now in effect. ## GridDrawEvent *1.x* ```ts interface GridDrawEvent extends Omit ``` The 1.x `draw` event of a grid line, one per tick of each axis. `x1`, `y1`, `x2`, `y2` are the line's ends in px. Properties: - `element: Svg` The drawn element, wrapped in [`Svg`](https://chartist.dev/api/svg/#Svg): change or animate it here. - `group: Svg` The group the element is in, wrapped in [`Svg`](https://chartist.dev/api/svg/#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. ## GridBackgroundDrawEvent *1.x* ```ts interface GridBackgroundDrawEvent ``` The 1.x `draw` event of the grid background, the `rect` behind the drawing area (with `showGridBackground`). Properties: - `type: 'gridBackground'` Always `'gridBackground'`. - `group: Svg` The grid group the background is in. - `element: Svg` The background `rect`. ## LabelDrawEvent *1.x* ```ts interface LabelDrawEvent extends Omit ``` The 1.x `draw` event of an axis label, one per tick. The label is a `foreignObject` with a `span`, placed at `x`, `y` with the given size. Properties: - `element: Svg` The drawn element, wrapped in [`Svg`](https://chartist.dev/api/svg/#Svg): change or animate it here. - `group: Svg` The group the element is in, wrapped in [`Svg`](https://chartist.dev/api/svg/#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. ## AxesDrawEvent *1.x* ```ts type AxesDrawEvent = GridDrawEvent | GridBackgroundDrawEvent | LabelDrawEvent ``` The 1.x `draw` events of the axes: grid lines, the grid background and labels. ## EventListener *1.x* ```ts type EventListener = (data: T) => void ``` A listener of one event: gets the event's payload. ## AllEventsListener *1.x* ```ts type AllEventsListener = (event: string, data: T) => void ``` A listener of every event (`'*'`): gets the event's name and payload.