Heatmaps show data by coloring each quadrant, making it easy to see where values are high or low at a glance. They help you quickly spot geographic trends and differences.
| Name | Description | Type | Required | Default |
gradient | Sets the gradient color of the heatmap | linear-gradient(${string}) | Yes | - |
scalars | Sets the scalar values for the gradient legend | number[] | Array<{ tick: number; percent: number }> | Yes | - |
labels | Sets the labels for the gradient legend. Can be a boolean, a function, or an object with collision and display properties. | boolean |(value: string | number | Date) => string |{ collision?: boolean; display(value: string | number | Date): string } | No | - |
Custom styling can be applied by targeting the class names below. Each class corresponds to a specific element for precise theming and overrides.
| Class Name | Element |
heatmap | The base SVG element that wraps the visualization area. |
worldmap__country | The path element representing individual country shapes. |