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

OverviewProperties

HistogramChartProps

extends,

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.
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.

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?		-	How many tracks to show by default, if there are more tracks than the specified here a scrollbar will be added.
showLabels?		true	Optional flag to determine whether to display labels.
annotationsActions?		-

HistogramAnnotations.Track

HistogramAnnotations.Track provides a slot for configuring the track in the HistogramChart.Annotations.

HistogramAnnotationsTrackProps

Name	Type	Default	Description
color?		-	Color of the track.
label?		-	Optional label for the track.
hidden?		-	Whether this track should be visible
indicatorsDisplay?		-	Defines how to show the annotations indicators: always, never, or on hover (auto) at Track level
symbol?		-	Annotations markers character (letter/emoji/icon/glyph or Unicode character).
priority?		-

HistogramAnnotations.Marker

HistogramAnnotations.Marker provides a slot for configuring the marker in the HistogramChart.Annotations.

HistogramAnnotationsMarkerProps

Name	Type	Default	Description
value		-	Value of the annotation marker
title		-	Title of the annotation.
description?		-	Details about the marker.
color?		-	Color of the marker
indicatorsDisplay?		-	Defines the display behaviour of marker's indicators of a particular track auto - a default behavior. Indicators are only shown on markers hover always - always show the marker indicator never - never shown the marker indicator
symbol?	|	-	Annotation marker character (letter/emoji/icon/glyph or Unicode character).
hidden?		-	Flag to hide a marker
priority?		-	Priority for annotation marker

ChartInteractions

Use the ChartInteractions component for configuring the chart zoom interactions of the chart.

ChartInteractionsProps

Name	Type	Default	Description
onZoomChange?		-	Callback called when any zoom event has been performed affecting the data timeframe

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.