Histogram Chart Customisation

In addition to the general chart customisations and cartesian chart customisations, you can also use these customisations for histogram charts.

Option Interfaces

interface HistogramChartOptions { seriesDefaults: { // the number of bins to aim for when partitioning the data. Note that the chart will // use a number of bins close to this value, but may not split into exactly this many // bins binCount: number; fill: FillOptions; stroke: StrokeOptions; // The shadow type to use for bars. Defaults to no shadow. // Note: shadows can noticeably slow down rendering of histograms with a larger // bin count shadow: DropShadowOptions; label: BarSeriesLabelOptions; // The style to apply to a bar when it is hovered over or tapped highlightStyle: HighlightOptions; // Configures the tooltip for bars when they are hovered over or tapped tooltip: TooltipOptions; }; } interface FillOptions { colors: string[]; // default: <dependent on selected palette> // Valid range from 0 (transparent) to 1 (opaque) opacity: number; // default: 1 } interface StrokeOptions { colors: string[]; // default: <dependent on selected palette> // Valid range from 0 (transparent) to 1 (opaque) opacity: number; // default: 1 width: number; // default: 1 } interface DropShadowOptions { enabled: boolean; // default: false color: string; // default: 'rgba(0, 0, 0, 0.5)' xOffset: number; // default: 3 yOffset: number; // default: 3 blur: number; // default: 5 } interface BarSeriesLabelOptions { enabled: boolean; // default: false fontStyle: FontStyle; // default: 'normal' fontWeight: FontWeight; // default: 'normal' fontSize: number; // default: 12 fontFamily: string; // default: 'Verdana, sans-serif' color: string; // default: <dependent on light/dark mode> formatter?: (params: { value: number }) => string; } interface HighlightOptions { fill: string; // default: 'yellow' stroke?: string; } interface TooltipOptions { enabled: boolean; // default: true renderer?: (params: HistogramTooltipRendererParams) => string; // should return a valid HTML string } // when rendering a tooltip for a histogram, instead of being passed the raw datum as with other // series types, because histograms are aggregations, the datum passed is a collection of several // data that were grouped together to render this bar export class HistogramBin { data: any[] = []; // the min and max values taken from the xKey of the data that this bin covers domain: [number, number]; } interface HistogramTooltipRendererParams { // The bin object for the highlighted bar that the tooltip is being rendered for datum: HistogramBin; // The key of the datum object that contains the X value xKey: string; // The name of the column that the X value is from xName: string; // The key of the datum object that contains the Y value yKey: string; // The name of the column that the Y value is from yName: string; // The title of the series the datum is in title?: string; // The fill colour of the series the datum is in color: string; }

Example: Histogram Chart Customisations

The example below changes all available styling options. The styling options are exaggerated to demonstrate each option rather than to produce a chart that looks nice!