Docs
๐Ÿ“Š โ Charts
Heatmap

Heatmap

A heatmap in REAVIZ visualizes data values within a matrix using color variations. This method, first termed by Cormac Kinney in 1991, is effective for showing patterns in correlations across multiple variables. Heatmaps are particularly useful in displaying large datasets and identifying trends that might not be obvious through other chart types.

Types supported by reaviz:

Where to use:

  • Visualize Variance: Ideal for displaying variance across multiple variables.
  • Identify Patterns: Useful for identifying patterns and correlations in data.
  • Analyze Complex Data: Great for analyzing large datasets with multiple variables.

Quick Start

To create a Heatmap, use import the Heatmap and give it data. The chart will automatically configure itself with the default options exposed via props.

Examples

Heatmap

Year Calendar

Month Calendar

API

Heatmap (opens in a new tab)

PropDescriptionDefault
dataData the chart will receive to render.
ChartNestedDataShape[]
[]
seriesThe series component that renders the cell components.
ReactElement<HeatmapSeriesProps, FC<Partial<HeatmapSeriesProps>>>
<HeatmapSeries padding={0.3} />
yAxisThe linear axis component for the Y Axis of the chart.
ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>
( <LinearYAxis type="category" axisLine={null} tickSeries={ <LinearYAxisTickSeries line={null} label={<LinearYAxisTickLabel padding={5} />} /> } /> )
xAxisThe linear axis component for the X Axis of the chart.
ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>
( <LinearXAxis type="category" axisLine={null} tickSeries={ <LinearXAxisTickSeries line={null} label={<LinearXAxisTickLabel padding={5} />} /> } /> )
secondaryAxisAny secondary axis components. Useful for multi-axis charts.
ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]
idId of the chart.
string
widthWidth of the chart. If not provided will autosize.
number
heightHeight of the chart. If not provided will autosize.
number
marginsMargins for the chart.
Margins
10
classNameClassnames for the chart.
string
containerClassNameClassnames for the chart.
string
styleAdditional css styles.
StyleHTMLAttributes<SVGSVGElement>
centerCenter the chart. Used mainly internally.
boolean
centerXCenter chart on X Axis only. Used mainly internally.
boolean
centerYCenter chart on Y Axis only. Used mainly internally.
boolean

CalendarHeatmap (opens in a new tab)

PropDescriptionDefault
dataChart data shape.
ChartShallowDataShape<ChartDataTypes | [ChartDataTypes, ChartDataTypes]>[]
heightHeight of the component.
number
widthWidth of the component.
number
viewView of the calendar renderer.
CalendarView
year
seriesThe series component that renders the cell components.
ReactElement<HeatmapSeriesProps, FC<Partial<HeatmapSeriesProps>>>
( <HeatmapSeries padding={0.3} emptyColor="transparent" cell={ <HeatmapCell tooltip={ <ChartTooltip content={(d) => `${formatValue(d.data.metadata.date)} โˆ™ ${formatValue( d.data.value )}` } /> } /> } /> )
yAxisThe linear axis component for the Y Axis of the chart.
ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>
xAxisThe linear axis component for the X Axis of the chart.
ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>
secondaryAxisAny secondary axis components. Useful for multi-axis charts.
ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]
idId of the chart.
string
marginsMargins for the chart.
Margins
classNameClassnames for the chart.
string
containerClassNameClassnames for the chart.
string
styleAdditional css styles.
StyleHTMLAttributes<SVGSVGElement>
centerCenter the chart. Used mainly internally.
boolean
centerXCenter chart on X Axis only. Used mainly internally.
boolean
centerYCenter chart on Y Axis only. Used mainly internally.
boolean

HeatmapSeries (opens in a new tab)

PropDescriptionDefault
paddingPadding between cells.
number
0.1
idId set by `Heatmap`.
string
dataParsed data set by `Heatmap`.
ChartInternalNestedDataShape[]
xScaleD3 scale for X Axis. Set internally by `Heatmap`.
any
yScaleD3 scale for Y Axis. Set internally by `Heatmap`.
any
colorSchemeColor scheme for the chart.
ColorSchemeType | ColorSchemeStyleArray
['rgba(28, 107, 86, 0.5)', '#2da283']
emptyColorColor for the empty cell of the chart.
string
rgba(200,200,200,0.08)
animatedWhether the chart is animated or not.
boolean
true
cellCell component that will be rendered.
ReactElement<HeatmapCellProps, FC<Partial<HeatmapCellProps>>>
<HeatmapCell />
selectionsSelected cell(s) in active state
any

HeatmapCell (opens in a new tab)

PropDescriptionDefault
xX Position set by `HeatmapSeries`.
number
yY Position set by `HeatmapSeries`.
number
rxrx SVG Attribute.
number
2
ryry SVG Attribute.
number
2
heightHeight of cell set by `HeatmapSeries`.
number
widthWidth of cell set by `HeatmapSeries`.
number
cellCountTotal count of cells set by `HeatmapSeries`.
number
tooltipTooltip component.
ReactElement<ChartTooltipProps, FC<Partial<ChartTooltipProps>>>
<ChartTooltip />
fillFill color set by `HeatmapSeries`.
string
strokeStroke color set by `HeatmapSeries`.
string
symbolSymbol element to render.
(data: ChartInternalShallowDataShape) => ReactNode
dataData object set by `Heatmap`.
ChartInternalShallowDataShape
animatedWhether cell is animated or not set by `HeatmapSeries`.
boolean
cellIndexCell index set by `HeatmapSeries`.
number
cursorCursor style attribute.
string
auto
onClickEvent for when the bar is clicked.
(event: any) => void
() => undefined
onMouseEnterEvent for when the bar has mouse enter.
(event: any) => void
() => undefined
onMouseLeaveEvent for when the bar has mouse leave.
(event: any) => void
() => undefined
classNameClassnames to apply to the element.
any
styleCSS styles to apply to the element.
any