Summary

This PR introduces histogram mode which will ensure that bar series bars are aligned with ticks along the xDomain axis such that the tick is aligned with the starting edge of a bar instead of in the center as is the current only option for bar series bars.

This mode can be enabled in one of two ways:

• using the enableHistogramMode prop on a BarSeriesSpec
• using the HistogramBarSeriesSpec which is identical to the BarSeriesSpec except that the enableHistogramMode does not need to be specified

If a user enables histogram mode in either of these ways, any split or additional defined bar series will be rendered as stacked bars as histogram mode does not allow clustering of bars.

In the story below, we toggle enableHistogramMode on individual BarSeriesSpecs (there are two distinct specs in the story) and if either one has it enabled, all series will stack; likewise, when checking hasHistogramBarSeries will add a HistogramBarSeriesSpec, causing all of the series to stack.

Additional features

Things get a little bit weird in Histogram Mode when we add Line & Area series because the bucketed points need to align with something. We expose a prop (histogramModeAlignment with options start, center, end) on LineSeriesSpec, AreaSeriesSpec, and LineAnnotationSpec to allow the user to define how these points should align in Histogram Mode (this is not specified for RectAnnotationSpec because RectAnnotations operate more like bars / bands so they are always aligned relative to starting edge of the histogram bars):

We also add one more tick to the available ticks for the xAxis in histogram mode. This is because, when the ticks get shifted, we need to also mark the ending edge of the last bar in the series:

A note about implementation:

There are two ways to approach aligning the bars correctly:
(1) shift the position of the bars by xScale.bandwidth / 2

• in this case, we also then need to shift the container by -xScale.band / 2 so that the first bar aligns with the starting edge of the chart and the last bar does not overflow the ending edge of the chart. we also need to shift the bars highlighting by xScale.bandwidth / 2.

(2) shift the position of the axis ticks by - xScale.bandwidth / 2

• in this case, we also then need to shift the other chart elements by -xScale.bandwidth / 2 (line and area) so their points align correctly with the starting edge of a bar instead of the center. bars highlighting does not need to be shifted in this case.

The advantage of (1) is that it does not require touching axis tick positioning or other chart elements, which it might seem weird to adjust those positions for histogramMode which seems to be a very bar series specific concern. However (1) has a couple of disadvantages:
- the first axis tick may slightly overflow the starting edge of the chart
- we need xScale.bandwidth before it is available (xScale computation relies on chartDimensions so on first render, we won't have an offset value)

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
• This was checked for cross-browser compatibility, including a check against IE11
• Proper documentation or storybook story was added for features that require explanation or tutorials
• Unit tests were updated or added to match the most common scenarios
• Each commit follows the convention