Heatmap
The Heatmap React component displays high-density data using a color-coded grid, making patterns and correlations easy to spot. Fully customizable and responsive, it's ideal for analytics and performance monitoring.
The Heatmap component is used to visualize data in a heatmap table format.
Usage
import { Heatmap } from "@sparrowengg/twigs-charts";
const Chart = () => {
return (
<Heatmap
data={[
{
x: "Jan",
y: "Sun",
value: 76,
},
{
x: "Jan",
y: "Mon",
value: 20,
},
{
x: "Jan",
y: "Tue",
value: 34,
},
{
x: "Jan",
y: "Wed",
value: 98,
},
{
x: "Jan",
y: "Thu",
value: 88,
},
{
x: "Jan",
y: "Fri",
value: 76,
},
// ... more data
]}
width="100%"
height={400}
series={{
xAxis: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
yAxis: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
xAxisGroup: [
{
name: "Q1",
items: ["Jan", "Feb", "Mar"],
},
{
name: "Q2",
items: ["Apr", "May", "Jun"],
},
{
name: "Q3",
items: ["Jul", "Aug", "Sep"],
},
{
name: "Q4",
items: ["Oct", "Nov", "Dec"],
},
],
}}
/>
);
}Props
| Prop | Type | Default |
|---|---|---|
tooltipProps? | Partial<HeatmapTooltipProps> | ((props: HeatmapTooltipProps) => Partial<HeatmapTooltipProps>) | - |
renderTooltipFooter? | () => ReactNode | null | - |
renderYAxisLabel? | (props: { x: number; y: number; text: string }) => ReactNode | - |
renderXAxisLabel? | (props: { x: number; y: number; text: string; groupName: string }) => ReactNode | - |
renderLegend? | (props: HeatmapLegendProps) => ReactNode | - |
renderCell? | (props: CellRenderData & { isHovered: boolean; hoveredCellId: string | null; elementProps: Record<string, string> }) => ReactNode | - |
renderGroupLabel? | (props: { x: number; y: number; group: HeatmapXAxisGroup }) => ReactNode | - |
deriveFillColor? | (props: DeriveFillColorProps) => string | - |
showTooltipFooter? | boolean | - |
legendMarginTop? | number | - |
legendBarHeight? | number | - |
legendHeight? | number | - |
legendWidth? | number | - |
cellHeight? | number | - |
cellWidth? | number | - |
color? | string | - |
marginY? | number | - |
marginX? | number | - |
groupLabelHeight? | number | - |
xAxisHeight? | number | - |
yAxisWidth? | number | - |
groupSpacing? | number | - |
cellSpacing? | number | - |
cellSize? | number | - |
containerProps? | BoxProps | - |
height? | number | string | - |
width? | number | string | - |
series | { xAxis: string[] | HeatmapXAxisItem[]; yAxis: string[] | HeatmapYAxisItem[]; xAxisGroup?: HeatmapXAxisGroup[] } | - |
data | Array<{ x: string; y: string; value: number }> | - |
Examples
Custom color
You can change the color of the cells by passing the color prop. The highest value will get the given color and it will gradually fade to a lighter shade as the value decreases. This behavior can be customized by using deriveFillColor prop.
Custom group label
You can customize the group label by passing the renderGroupLabel prop.
Derive fill color
You can customize the fill color of the cells by passing the deriveFillColor prop. This will give you more control over the color of the cells.
Custom cell
Custom legend
Custom x-axis label
Custom y-axis label
Donut Chart
The DonutChart React component visualizes proportional data with an interactive, circular design. Perfect for showing parts of a whole, it supports labels, tooltips, and custom inner radius styling.
Line Chart
The LineChart React component renders smooth, responsive line charts to track trends over time. It supports multiple data series, tooltips, and interactive features for clear and dynamic data visualization.