Bar and Column

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

(function (H) {
        var each = H.each,
            pick = H.pick,
            Series = H.Series,
            seriesType = H.seriesType;
        
        
        seriesType('floatingStep', 'column', {
            fixedPointLength: 2
        }, /** @lends seriesTypes.floatingStep.prototype */ {

            /**
             * Translate each point to the plot area coordinate system and find shape positions
             */
            translate: function () {
                var series = this,
                    chart = series.chart,
                    options = series.options,
                    dense = series.dense = series.closestPointRange * series.xAxis.transA < 2,
                    borderWidth = series.borderWidth = pick(
                        options.borderWidth,
                        dense ? 0 : 1 // #3635
                    ),
                    yAxis = series.yAxis,
                    threshold = options.threshold,
                    translatedThreshold = series.translatedThreshold = yAxis.getThreshold(threshold),
                    minPointLength = pick(options.minPointLength, 5),
                    fixedPointLength = options.fixedPointLength,
                    metrics = series.getColumnMetrics(),
                    pointWidth = metrics.width,
                    seriesBarW = series.barW = Math.max(pointWidth, 1 + 2 * borderWidth), // postprocessed for border width
                    pointXOffset = series.pointXOffset = metrics.offset;

                if (chart.inverted) {
                    translatedThreshold -= 0.5; // #3355
                }

                // When the pointPadding is 0, we want the columns to be packed tightly, so we allow individual
                // columns to have individual sizes. When pointPadding is greater, we strive for equal-width
                // columns (#2694).
                if (options.pointPadding) {
                    seriesBarW = Math.ceil(seriesBarW);
                }

               ...