chart gallery
Chart Animation and Crosshair, Live
Charts that move between pictures, and a crosshair that reads every series at once and travels across charts. Try both against a live grid.
Chart animation
Charts move between pictures instead of jumping. The first drawing plays in, with bars growing from the baseline, lines drawing across and slices sweeping open, and every change the grid makes then glides from the old picture to the new: a filter, a sort, an edit or a live feed. Bars that stay move and grow rather than being redrawn, new ones grow in and departing ones shrink out, so a reader keeps track of what changed. Animation is on by default, anyone who prefers reduced motion gets the finished chart at once, and you can turn it off or tune the speed and easing.
Try it. Filter the grid by region or product and watch the bars glide to their new heights.
The code
createChart({
grid,
container,
type: 'bar',
x: 'region',
y: 'sales',
animation: { duration: 700, easing: 'ease-in-out' },
title: 'Sales by region',
});Options used:
animation, duration, easing
Sample data
({
columns: [
{ field: 'region', title: 'Region', filter: { type: 'set' } },
{ field: 'product', title: 'Product', filter: { type: 'set' } },
{ field: 'sales', title: 'Sales', type: 'number', format: { style: 'currency', currency: 'GBP', decimals: 0 } },
],
rows: [
['North', 'Fibre', 84000], ['North', 'Voice', 31000], ['North', 'Cloud', 52000],
['South', 'Fibre', 126000], ['South', 'Voice', 44000], ['South', 'Cloud', 91000],
['East', 'Fibre', 67000], ['East', 'Voice', 22000], ['East', 'Cloud', 38000],
['West', 'Fibre', 98000], ['West', 'Voice', 36000], ['West', 'Cloud', 74000],
].map(([region, product, sales], i) => ({ id: i, region, product, sales })),
})Chart crosshair and synced cursors
A crosshair follows the pointer, snaps to the nearest reading in the data rather than the nearest pixel, labels the axis in its own format and lists every series’ value at that point in one tooltip. Give charts the same cursor group and they share it by value across different grids and ranges: hover one at minute 18 and every other chart points at minute 18 on its own scale. It can also follow the grid row under the pointer, and it works from the keyboard with the arrow keys, Home, End and Escape. Your page can read and set it too.
Try it. Move across either chart and both show a hairline at the same minute. Move over the grid rows and the first chart’s cursor jumps to that row’s minute.
The code
createChart({
grid,
container: containers[0],
type: 'line',
x: 't',
y: 'cpu',
axis: { x: { scale: 'linear' } },
cursor: { group: 'ops', rowHover: true },
title: 'CPU (%)',
});
createChart({
grid,
container: containers[1],
type: 'line',
x: 't',
y: 'latency',
axis: { x: { scale: 'linear' } },
cursor: { group: 'ops' },
title: 'Latency (ms)',
});Options used:
cursor, cursor.group, cursor.rowHover
Sample data
({
columns: [
{ field: 't', title: 'Minute', type: 'number' },
{ field: 'cpu', title: 'CPU (%)', type: 'number' },
{ field: 'latency', title: 'Latency (ms)', type: 'number' },
],
rows: Array.from({ length: 30 }, (_, t) => ({
id: t,
t,
cpu: Math.round(38 + 30 * Math.exp(-Math.pow(t - 18, 2) / 40) + 6 * Math.sin(t * 1.3)),
latency: Math.round(120 + 260 * Math.exp(-Math.pow(t - 19, 2) / 30) + 14 * Math.cos(t * 1.1)),
})),
})Every chart type, live → The charts API reference → How a chart binds to a grid →