Heatmap

Vanilla JS

import { HeatmapChart } from '@arshad-shah/swift-chart';

const chart = new HeatmapChart('#chart', { theme: 'midnight' });
chart.setData(rows, { x: 'hour', y: 'day', valueField: 'visits' });

React

import { Heatmap } from '@arshad-shah/swift-chart/react';

<Heatmap
  data={rows}
  mapping={{ x: 'hour', y: 'day', valueField: 'visits' }}
  theme="midnight"
  height={300}
/>

Custom colour ramp

Pass a two-stop ramp via colorScale. Values interpolate linearly between the stops.

Reference

• Class: HeatmapChart
• React component: Heatmap