Docs › Interaction and export

Linked charts (shared crosshair)

Different units: two charts with one crosshair instead of a dual axis.

Charts with the same group name share the crosshair: hover one and the others point at the same x. They match by label value, so give them the same labels. It is how to read values with different units together without a dual axis.

const labels = ['Oct 15', 'Oct 16', 'Oct 17', 'Oct 18', 'Oct 19', 'Oct 20', 'Oct 21'];
createChart('#sales', {
  type: 'bar', title: 'Sales', prefix: '$', group: 'daily', height: 180,
  data: { labels, series: [{ name: 'Sales', data: [2410, 2650, 2580, 2990, 3420, 3610, 3380] }] },
});
createChart('#orders', {
  type: 'line', title: 'Orders', group: 'daily', height: 180,
  data: { labels, series: [{ name: 'Orders', data: [61, 70, 66, 74, 92, 98, 85] }] },
});

Move a chart to another group with setOptions({ group: 'other' }); destroy() takes it out.