HeatmapChart

HeatmapChart lays a value out on a grid and encodes its magnitude as colour intensity, surfacing patterns across two categorical axes — like activity by day and hour. Pass data as [xIndex, yIndex, value] tuples whose indexes line up with the xLabels (columns) and yLabels (rows) arrays. It renders client-side via ECharts, so give it a height (defaults to 280).

Example

import { HeatmapChart } from '@officina/ui';

// [xIndex, yIndex, value]
const data = [
  [0, 0, 5],
  [1, 0, 7],
  [0, 1, 2],
  [1, 1, 9],
];

<HeatmapChart data={data} xLabels={['Mon', 'Tue']} yLabels={['AM', 'PM']} height={280} />;

API