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. |
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.Threshold
TimeseriesChart.Threshold
provides a slot for defining thresholds in the
chart.
HistogramThresholdProps
Name | Type | Default | Description |
---|---|---|---|
data | - | The threshold data to be graphed by the component | |
color | - | The unique color picked for this histogram representation in HEX, RGB, Color Token or HSL. | |
position? | - | The position of the threshold relative to the histogram chart. | |
strokeOnly? | - | Whereas to show the ranges filled or only the strokes | |
label? | "Threshold" | Label to be shown in the threshold tooltip. |
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 |
---|---|---|---|
priority? | - | ||
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 |
---|---|---|---|
start? | - | Make start optional until | |
value? | - | ||
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.
ChartInteractionsProps
Name | Type | Default | Description |
---|---|---|---|
onZoomChange? | - |
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.