Bi-polar bar chart
Ten weeks of positive and negative values around zero, with every other label shown.
src/main.ts
import 'chartist/styles.css';
import { barChart, type BarChartPresetOptions } from 'chartist';
const data = {
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
series: [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]]
};
const options: BarChartPresetOptions = {
high: 10,
low: -10,
axisX: {
labelInterpolationFnc(value, index) {
return index % 2 === 0 ? value : null;
}
}
};
barChart('#chart', data, options);import 'chartist/styles.css';
import { BarChart, type BarChartOptions } from 'chartist';
const data = {
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
series: [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]]
};
const options: BarChartOptions = {
high: 10,
low: -10,
axisX: {
labelInterpolationFnc(value, index) {
return index % 2 === 0 ? value : null;
}
}
};
new BarChart('#chart', data, options); Live
Open in the playgroundView as MarkdownSwitch to 1.x above the code to see the same chart written with the Chartist 1.x classes.