# chartist/compat (Chartist API)

> The 1.x events (data, draw, created, …) and 1.x plugins on the functional API.

## compat

*from `chartist/compat`*

```ts
const compat: ChartPlugin & { legacyPlugin: typeof legacyPlugin }
```

The compat plugin. Restores the 1.x events (`data`, `optionsChanged`, `draw`, `created`, `animationBegin`, `animationEnd`) with 1.x payloads. With it, the 1.x chart classes also run 1.x plugin functions.

Add it to `plugins`, of a 1.x class, a preset or `chart()`. The `draw` events come in the 1.x order, right after the chart is in the DOM, so `element` is a live element; then `created`. Animations started with `animate()` on the chart's elements emit `animationBegin` and `animationEnd`. Importing `chartist/compat` also types the 1.x events on every chart handle. It needs the DOM renderer, and the `draw` and `created` events need a chart made by a preset or a 1.x class.

```ts
import { lineChart } from 'chartist';
import { compat } from 'chartist/compat';

const chart = lineChart(
  '#chart',
  {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [[12, 9, 7, 8, 5]]
  },
  { plugins: [compat] }
);

// Registered after the first render, so it runs from the next one on.
chart.on('draw', data => {
  if (data.type === 'point' && data.index === 4) {
    data.element.addClass('is-friday');
  }
});
```

## fromLegacyPlugin

*from `chartist/compat`*

```ts
function fromLegacyPlugin(plugin: LegacyPlugin, options?: unknown): ChartPlugin
```

Converts a 1.x plugin function into a v2 plugin for `chart()` and the preset functions. It turns the 1.x events on for the chart and calls the plugin with a 1.x-style chart object (`container`, `data`, `options`, `svg`, `eventEmitter`, `on`, `off`, `update`, `detach`). You don't need [`compat`](https://chartist.dev/api/compat/#compat) in the list as well.

Parameters:

- `plugin: LegacyPlugin` The 1.x plugin: a function that gets the chart (and its options)
- `options?: unknown` The plugin's options; without them, the plugin is called with the chart only, as in 1.x

```ts
import { lineChart, type Plugin } from 'chartist';
import { fromLegacyPlugin } from 'chartist/compat';

// A 1.x plugin: a function that gets the chart and its options.
const caption: Plugin = (chart, options) => {
  chart.on('created', () => {
    chart.container.setAttribute('aria-label', options.text);
  });
};

lineChart(
  '#chart',
  { series: [[1, 3, 2, 4]] },
  { plugins: [fromLegacyPlugin(caption, { text: 'Visitors per week' })] }
);
```

## AreaDrawEvent

*from `chartist/compat`*

```ts
type AreaDrawEvent = Core.AreaDrawEvent
```

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<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.

## AxesDrawEvent

*from `chartist/compat`*

```ts
type AxesDrawEvent = Core.AxesDrawEvent
```

The 1.x `draw` events of the axes: grid lines, the grid background and labels.

## BarChartCreatedEvent

*from `chartist/compat`*

```ts
type BarChartCreatedEvent = Core.BarChartCreatedEvent
```

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

*from `chartist/compat`*

```ts
type BarDrawEvent = Core.BarDrawEvent
```

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<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.

## CreatedEvent

*from `chartist/compat`*

```ts
type CreatedEvent<TOptions = Options> = Core.CreatedEvent<TOptions>
```

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.

## DataEvent

*from `chartist/compat`*

```ts
type DataEvent = Core.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).

## DrawEvent

*from `chartist/compat`*

```ts
type DrawEvent = Core.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<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.

## GridBackgroundDrawEvent

*from `chartist/compat`*

```ts
type GridBackgroundDrawEvent = Core.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`.

## GridDrawEvent

*from `chartist/compat`*

```ts
type GridDrawEvent = Core.GridDrawEvent
```

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.

## LabelDrawEvent

*from `chartist/compat`*

```ts
type LabelDrawEvent = Core.LabelDrawEvent
```

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.

## LineChartCreatedEvent

*from `chartist/compat`*

```ts
type LineChartCreatedEvent = Core.LineChartCreatedEvent
```

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.

## LineDrawEvent

*from `chartist/compat`*

```ts
type LineDrawEvent = Core.LineDrawEvent
```

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<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.

## OptionsChangedEvent

*from `chartist/compat`*

```ts
type OptionsChangedEvent<T = Options> = Core.OptionsChangedEvent<T>
```

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.

## PieChartCreatedEvent

*from `chartist/compat`*

```ts
type PieChartCreatedEvent = Core.PieChartCreatedEvent
```

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.

## Plugin

*from `chartist/compat`*

```ts
type Plugin = Core.Plugin
```

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.

## PointDrawEvent

*from `chartist/compat`*

```ts
type PointDrawEvent = Core.PointDrawEvent
```

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<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.

## SliceDrawEvent

*from `chartist/compat`*

```ts
type SliceDrawEvent = Core.SliceDrawEvent
```

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<SeriesPrimitiveValue> | FlatSeriesValue<FlatSeriesPrimitiveValue> | Series<SeriesPrimitiveValue>` The series as given in the data: an array or a series object.

## SliceLabelDrawEvent

*from `chartist/compat`*

```ts
type SliceLabelDrawEvent = Core.SliceLabelDrawEvent
```

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<SeriesPrimitiveValue> | FlatSeriesValue<FlatSeriesPrimitiveValue> | Series<SeriesPrimitiveValue>` The series as given in the data: an array or a series object.