HistogramChart
A HistogramChart is a type of graph that represents the distribution of
numerical data. It’s constructed by dividing the entire range of values into a
series of intervals—known as bins and then counting how many values fall into
each interval. The bins are typically of equal size and are adjacent to each
other, with no gaps. Each bin is represented by a bar, where the height of the
bar reflects the frequency or count of data points within that interval
HistogramChartProps
, , <>| Name | Type | Default | Description |
|---|---|---|---|
data | [] | | Data object for the histogram chart |
height? | | | 300px | Chart height. When a number is specified, it's treated as pixels, otherwise a valid height string is expected. |
width? | 100% | Chart width. A number in pixels is expected. Otherwise, it will take the full width of the container | |
seriesActions? | (series: , bin: ) => | | Actions to be shown in the legend and tooltip actions |
truncationMode? | 'middle' | Truncation mode to use (start, middle, end) Applied to all the parts that truncate text. | |
colorPalette? | | | "categorical" | Color palette to be used for the bar category. |
loading? | false | Show the loading indicator when truthy. | |
valueRepresentation? | "absolute" | The way values are represented. "absolute" will display the value as it is, and "relative" displays a percentage value considering the other dimensions values within a categories. | |
infiniteZoom? | false | Enables infinite zooming |
HistogramChart.Legend
To configure the legend, add HistogramChart.Legend to the histogram chart.
HistogramChartLegendProps
Signature:
export declare type HistogramChart = ;HistogramChart.Tooltip
To configure the tooltip, add HistogramChart.Tooltip to the histogram chart.
HistogramChartTooltipProps
| Name | Type | Default | Description |
|---|---|---|---|
variant? | | Whether the tooltip should contain bins from all series or just the closest one. |
HistogramChart.XAxis
To configure the x-axis, add HistogramChart.XAxis to the histogram chart.
HistogramChartXAxisProps
| Name | Type | Default | Description |
|---|---|---|---|
max? | | | | 'auto' | The max value configuration to display in the axis |
min? | | | | 'auto' | The min value configuration to display in the axis |
label? | | The title used for the axis | |
scale? | | The scale to be used | |
formatter? | | <, > | | Formatter to be applied for each tick of the axis |
unit? | | The unit for the axis |
HistogramChart.YAxis
To configure the y-axis, add HistogramChart.YAxis to the histogram chart.
HistogramChartYAxisProps
| Name | Type | Default | Description |
|---|---|---|---|
max? | | | | 'auto' | The max value configuration to display in the axis |
min? | | | | 'auto' | The min value configuration to display in the axis |
label? | | The title used for the axis | |
scale? | | The scale to be used | |
formatter? | | <, > | | Formatter to be applied for each tick of the axis |
position? | | | 'left' | The position of the y axis relative to the histogram chart |
HistogramChart.ThresholdIndicator
HistogramChart.ThresholdIndicator provides a slot for defining thresholds in
the chart.
HistogramThresholdIndicatorProps
Signature:
export declare type HistogramThresholdIndicatorProps = ;HistogramChart.EmptyState
HistogramChart.EmptyState provides a slot where the Empty state wrapper can be
set.
EmptyStateProp
| Name | Type | Default | Description |
|---|---|---|---|
children | |
HistogramChart.ErrorState
HistogramChart.ErrorState provides a slot where the Error state wrapper can be
set.
ErrorStateProps
| Name | Type | Default | Description |
|---|---|---|---|
children | | ((errorMessage: ) => .) | |
HistogramChart.Annotations
HistogramChart.Annotations provides a slot for configuring annotations in the
histogram.
HistogramAnnotationsProps
| Name | Type | Default | Description |
|---|---|---|---|
visibleTracksLimit? | 3 | How many tracks to show by default, if there are more tracks than the specified here a scrollbar will be added. |
HistogramAnnotations.Track
HistogramAnnotations.Track provides a slot for configuring the track in the
HistogramChart.Annotations.
HistogramAnnotationsTrackProps
| Name | Type | Default | Description |
|---|---|---|---|
indicatorsDisplay? | 'auto' | Defines how to show the annotations indicators: always, never, or on hover (auto) at Track level |
HistogramAnnotations.Marker
HistogramAnnotations.Marker provides a slot for configuring the marker in the
HistogramChart.Annotations.
HistogramAnnotationsMarkerProps
, | Name | Type | Default | Description |
|---|---|---|---|
indicatorsDisplay? | 'auto' | Defines how to show the marker indicator on top of the chart: always, never, or on hover (auto) |
ChartInteractions
Use the ChartInteractions component for configuring the chart zoom
interactions of the chart.
ChartInteractions.Zoom
Define the ChartInteractions.Zoom component within the ChartInteractions for
enabling the zoom in/out of the chart.
ChartInteractions.ZoomX
Define the ChartInteractions.ZoomX component the ChartInteractions for
enabling the zoom in the x axis of the chart.
ChartInteractions.Pan
Define the ChartInteractions.Pan component the ChartInteractions for
enabling the pan of the chart.