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.
Example
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');
}
});function fromLegacyPlugin(plugin: LegacyPlugin, options?: unknown): ChartPluginConverts 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 in the list as well.
Parameters
pluginLegacyPluginThe 1.x plugin: a function that gets the chart (and its options)
options?unknownThe plugin's options; without them, the plugin is called with the chart only, as in 1.x
Example
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' })] }
);type AreaDrawEvent = Core.AreaDrawEventThe 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'.valuesNormalizedSeriesAll normalized values of the series.
metaanyThe
metaof the value (or of the series, for lines and areas).indexnumberThe index of the value in its series (of the series, for lines and areas).
seriesSeriesObject<SeriesPrimitiveValue> | FlatSeriesValue<FlatSeriesPrimitiveValue> | Series<SeriesPrimitiveValue>The series as given in the data: an array or a series object.
seriesIndexnumberThe index of the series in the data.
type AxesDrawEvent = Core.AxesDrawEventThe 1.x draw events of the axes: grid lines, the grid background and labels.
type BarChartCreatedEvent = Core.BarChartCreatedEventThe payload of a bar chart's 1.x created event.
type BarDrawEvent = Core.BarDrawEventThe 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'.valuenumber | NormalizedMultiThe bar's normalized value: a number, or
{ x, y }numbers.x1numberThe x of the bar's base, in px.
y1numberThe y of the bar's base, in px.
x2numberThe x of the bar's end (its value), in px.
y2numberThe y of the bar's end (its value), in px.
metaanyThe
metaof the value (or of the series, for lines and areas).indexnumberThe index of the value in its series (of the series, for lines and areas).
seriesSeriesObject<SeriesPrimitiveValue> | FlatSeriesValue<FlatSeriesPrimitiveValue> | Series<SeriesPrimitiveValue>The series as given in the data: an array or a series object.
seriesIndexnumberThe index of the series in the data.
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.
type DataEvent = Core.DataEventThe payload of the 1.x data event, emitted before a chart draws new data. Listeners may change data in place to transform it.
type DrawEvent = Core.DrawEventThe fields every 1.x draw event shares. A draw listener gets one per element drawn; check type to tell them apart.
Properties
typestringWhat was drawn:
'point','line','bar','grid', …metaanyThe
metaof the value (or of the series, for lines and areas).indexnumberThe index of the value in its series (of the series, for lines and areas).
seriesSeriesObject<SeriesPrimitiveValue> | FlatSeriesValue<FlatSeriesPrimitiveValue> | Series<SeriesPrimitiveValue>The series as given in the data: an array or a series object.
seriesIndexnumberThe index of the series in the data.
type GridBackgroundDrawEvent = Core.GridBackgroundDrawEventThe 1.x draw event of the grid background, the rect behind the drawing area (with showGridBackground).
type GridDrawEvent = Core.GridDrawEventThe 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
type LabelDrawEvent = Core.LabelDrawEventThe 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
type LineChartCreatedEvent = Core.LineChartCreatedEventThe payload of a line chart's 1.x created event.
type LineDrawEvent = Core.LineDrawEventThe 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'.valuesNormalizedSeriesAll normalized values of the series.
metaanyThe
metaof the value (or of the series, for lines and areas).indexnumberThe index of the value in its series (of the series, for lines and areas).
seriesSeriesObject<SeriesPrimitiveValue> | FlatSeriesValue<FlatSeriesPrimitiveValue> | Series<SeriesPrimitiveValue>The series as given in the data: an array or a series object.
seriesIndexnumberThe index of the series in the data.
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
previousOptionsTThe options before the change.
currentOptionsTThe options now in effect.
type PieChartCreatedEvent = Core.PieChartCreatedEventThe payload of a pie chart's 1.x created event: as for other charts, without axes.
type Plugin = Core.PluginA 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.
type PointDrawEvent = Core.PointDrawEventThe 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'.valueNormalizedSeriesPrimitiveValueThe point's normalized value:
{ x, y }numbers, or a number.xnumberThe point's x, in px.
ynumberThe point's y, in px.
metaanyThe
metaof the value (or of the series, for lines and areas).indexnumberThe index of the value in its series (of the series, for lines and areas).
seriesSeriesObject<SeriesPrimitiveValue> | FlatSeriesValue<FlatSeriesPrimitiveValue> | Series<SeriesPrimitiveValue>The series as given in the data: an array or a series object.
seriesIndexnumberThe index of the series in the data.
type SliceDrawEvent = Core.SliceDrawEventThe 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'.valueNormalizedSeriesPrimitiveValueThe slice's value.
totalDataSumnumberThe value of the full circle: the sum of all values, or the
totaloption.radiusnumberThe radius of the pie, in px.
startAnglenumberWhere the slice starts, in degrees clockwise from the top.
endAnglenumberWhere the slice ends, in degrees clockwise from the top.
metaanyThe
metaof the value (or of the series, for lines and areas).indexnumberThe index of the value in its series (of the series, for lines and areas).
seriesSeriesObject<SeriesPrimitiveValue> | FlatSeriesValue<FlatSeriesPrimitiveValue> | Series<SeriesPrimitiveValue>The series as given in the data: an array or a series object.
type SliceLabelDrawEvent = Core.SliceLabelDrawEventThe 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'.textstringThe label as shown, after
labelInterpolationFnc.xnumberThe x the label is anchored at, in px.
ynumberThe y the label is anchored at, in px.
metaanyThe
metaof the value (or of the series, for lines and areas).indexnumberThe index of the value in its series (of the series, for lines and areas).
seriesSeriesObject<SeriesPrimitiveValue> | FlatSeriesValue<FlatSeriesPrimitiveValue> | Series<SeriesPrimitiveValue>The series as given in the data: an array or a series object.