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.
width?	|	100%	Chart width. When a number is specified, it's treated as pixels, otherwise a valid width 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.
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.Select

HistogramChart.Select provides a slot that enables functionality for selecting a specific area in the chart.

SelectProps

Name	Type	Default	Description
actions?	(selectedSeries: [], selectionDomain: [, ]) => | <>		Custom actions handler

HistogramChart.Intent

HistogramChart.Intent provides a slot to set intents that will appear in the toolbar.

IntentProps

Signature:

export declare type IntentProps = | ;

HistogramChart.ColorRule

HistogramChart.ColorRule provides a slot to apply conditional coloring to your chart series based on their values or names.

ColorRuleProps

Signature:

export declare type ColorRuleProps = { valueAccessor?: ; comparator: ; matchValue: ; } & ;

HistogramChart.Annotations

HistogramChart.Annotations provides a slot for configuring annotations in the histogram.

HistogramAnnotationsProps

extends

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.
textOverflow?		'expand'	Controls whether annotation text may expand beyond its track boundary or is truncated.

HistogramAnnotations.Track

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

HistogramAnnotationsTrackProps

extends

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

extends,

Name	Type	Default	Description
indicatorsDisplay?		'auto'	Defines how to show the marker indicator on top of the chart: always, never, or on hover (auto)

HistogramAnnotations.Tooltip

HistogramAnnotations.Tooltip provides a slot for defining a custom tooltip for the annotations.

AnnotationsTooltipProps

Name	Type	Default	Description
hidden?		false	Defines whether tooltip show be hidden or not
children?			The ChoroplethLayer tooltip handler template

HistogramChart.Toolbar

HistogramChart.Toolbar provides a slot to customize the toolbar of the chart.

HistogramToolbarSlotProps

Signature:

export declare type HistogramToolbarSlotProps = ;

HistogramChart.DownloadCSV

HistogramChart.DownloadCSV provides a slot to toggle the download CSV of the chart.

HistogramChart.Zoom

HistogramChart.Zoom provides a slot to toggle the zoom of the chart.

ZoomSlotProps

Name	Type	Default	Description
disabled?			Whether the zoom is disabled.

HistogramChart.Pan

HistogramChart.Pan provides a slot to toggle the pan of the chart.

PanSlotProps

Name	Type	Default	Description
disabled?			Whether the pan is disabled.