Histogram

In ChartXY context, histograms can be displayed in a handful of different ways.

// Example data, note that this is previously calculated histogram data.
// e.g. how values are distributed across bins
const histogramData = [
    { x: 0, y: 0 },
    { x: 1, y: 5 },
    { x: 2, y: 10 },
    { x: 3, y: 12 },
    { x: 4, y: 7 },
    { x: 5, y: 9 },
    { x: 6, y: 3 },
    { x: 7, y: 1 },
]

Step series

A convenient way to display a histogram is to use Step series with middle mode. Displaying area fill / stroke / points is of course optional. Refer to Step](/6.1.2/features/xy/step) section for more information.

chart
    .addPointLineAreaSeries({ dataPattern: 'ProgressiveX' })
    .setCurvePreprocessing({ type: 'step', step: 'middle' })
    .appendJSON(histogramData)

Segment series

Another way to display a histogram is to use Segment series](/6.1.2/features/xy/figures). In this case, each bar thickness can be configured in pixels (by configuring stroke thickness).

const segmentSeries = chart.addSegmentSeries()
    .setDefaultStyle((figure) => figure.setStrokeStyle((stroke) => stroke.setThickness(20)))
histogramData.forEach((point) => {
    segmentSeries.add({ startX: point.x, startY: 0, endX: point.x, endY: point.y })
})

Rectangle series

Lastly, one more way of displaying a histogram is to use Rectangle series](/6.1.2/features/xy/figures).

const rectangleSeries = chart.addRectangleSeries()
histogramData.forEach((point) => {
    rectangleSeries.add({
        x1: point.x - 0.3,
        x2: point.x + 0.3,
        y1: 0,
        y2: point.y,
    })
})

Bar chart

Histograms can also be visualized using BarChart, a different chart type compared to ChartXY. See Bar Chart](/6.1.2/features/bar).

It's worth noting that with this approach, you can't place other XY visualization types in the same chart as the histogram.