Highcharts: Duplicate X-Axis Labels when dataGrouping is enabled (by Month)

Question

I'm experiencing an issue when grouping data by month. I believe it to be a bug with the size of the dataset (January 1, 2018 - April 30, 2018) that I'm using but perhaps there is a better way of utilizing dataGrouping. The issue that I'm experiencing is that the X-Axis labels are not correct.

For a date range of January 1, 2018 to April 30, 2018:

Expected X-Axis to Be: "Jan, '18" "Feb, '18" "Mar, '18" "Apr, '18"

Actual X-Axis: "Jan, '18" "Feb, '18" "Mar, '18" "Mar, '18" "Apr, '18"

In my example (jsfiddle), I'm conditionally enabling dataGrouping on line 76: data.dataGrouping.enabled = (e.target.value === 'month');

Any insight would be greatly appreciated.

what are you trying to achieve here? are you saying that your bar looks so small when you do grouping? Is it because of the responsiveness of the chart? — PKA
March appears twice in the chart, I think that is the issue. — ewolden
That is correct: March is appearing twice for this date range. The data is just a small sample of the application working on. I can replicate this with various datasets. — Scott
For the second March this.value returns 1522500000000 which is to say Saturday, March 31, 2018 12:40:00 PM. This probably has something to do with how the approximation works, not that I can say for sure. Ref: api.highcharts.com/highstock/series.column.dataGrouping. It looks like it groups 30 days as a month, no matter the real length. — ewolden

Scott Scott · Accepted Answer · 2018-05-03T18:11:52

I think I found the solution: Use HighStocks and not HighCharts

I have an updated fiddle with the result. Summary:

Use HighScocks and just turn off some features to make it appear like a Highstock chart:

var chart = Highcharts.stockChart('myChart', {
    chart: {
        type: 'column',
        width: null
    },
    xAxis: {
        labels: {
            enabled: true,
            formatter: function() {
                if (grouping === 'date') {
                    return Highcharts.dateFormat('%b %e, \'%y', this.value);
                } else {
                    return Highcharts.dateFormat('%b, \'%y', this.value);
                }
            }
        }
    },
    navigator: {
        enabled: false
    },
    scrollbar: {
        enabled: false
    },
    rangeSelector: {
        enabled: false
    },
    yAxis: {
        title: {
            text: null
        }
    },
    title: {
        text: null
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            color: 'white'
        }
    },
    tooltip: {
        backgroundColor: '#0E7BBA',
        style: {
            color: 'white'
        },
        formatter: function() {
            var s = ''
            if (grouping === 'date') {
                s = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>';
            } else {
                s = '<b>' + 'Date: ' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '<br />' +
                '<b>Month: ' + Highcharts.dateFormat('%B %Y', this.x) + '</b>';
            }
            s += '<br />' + this.points[0].series.name + ': ' + this.y;
            return s;
        }
    },
    credits: {
        enabled: false
    },
        series: []
    }
);

Highcharts: Duplicate X-Axis Labels when dataGrouping is enabled (by Month)

1 Answers