Blog>
Snippets

Data Binding for a Heat Map

Demonstrate the process of binding geographic data to a heat map using TanStack React Charts, focusing on data formatting and the configuration of chart options to represent data density.
import { useHeatMap } from '@tanstack/react-charts';
import React from 'react';
Import necessary React and TanStack React Charts functions for creating a heat map.
const data = [
  { id: 'New York', value: 67 },
  { id: 'Los Angeles', value: 52 },
  { id: 'Chicago', value: 48 }
];
Define the data structure. This contains geographic IDs and corresponding values indicating the data density or magnitude.
const MyHeatMapChart = () => {
  const series = React.useMemo(() => [
    {
      datums: data.map(d => ({
        x: d.id,
        y: d.value
      }))
    }
  ], [data]);
  
  const options = React.useMemo(() => ({
    data: series
    // Additional configuration for the heat map can be placed here
  }), [series]);
  
  const [chart] = useHeatMap(options);
  
  return <div>{chart}</div>;
};
Create a React component for the heatmap chart. Use useMemo for data and options to optimize performance. Data is passed into options. useHeatMap hook is called with these options.