Month wise category separation in Highcharts

I have an application that uses Highcharts. Following Fiddle shows a sample of the code.

Highcharts.chart('container-main-bar', {
                chart: {
                    type: 'line',
                    events: {
                        drilldown: function(e) {


                        },
                        drillup: function (e) {


                        }
                    },
                },
                exporting: { enabled: true },
                title: {
                    text: 'Car Sales'
                },
                xAxis: {
                    type: 'category',
                    labels: {
                        formatter () {
                            return `<span style="color: #626262">${this.value}</span>`
                        }
                    }
                },
                yAxis: {
                    title: {
                        text: 'Sales'
                    },
                    allowDecimals: false,
                    labels: {
                        formatter () {
                            return `<span style="color: #626262">${this.value}</span>`
                        }
                    }

                },
                legend: {
                    enabled: true
                },
                plotOptions: {
                     series: {
                         borderWidth: 0,
                         dataLabels: {
                             enabled: true,
                             format: '{point.y}'
                         },
                     },
                },

                tooltip: {
                    headerFormat: '<span style="font-size:11px">Sales as at</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.date}</span>: <b>{point.y}</b> <br/>'
                },

                "series": [
                    {
                        "name": "Australia",
                        "data": [
                            {
                                "name": "Jan",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year5',

                            },
                            {
                                "name": "Feb",
                                "y": 40,
                                "color": '#ff910c',
                                "drilldown": 'Year4',

                            },
                            {
                                "name": "Mar",
                                "y": 50,
                                "color": '#ff910c',
                                "drilldown": 'Year3',

                            },
                            {
                                "name": "Apr",
                                "y": 30,
                                "color": '#ff910c',
                                "drilldown": 'Year2',

                            },
                            {
                                "name": "May",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year1',

                            },
                            {
                                "name": "Jun",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Jul",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Aug",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Sep",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Oct",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Nov",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Dec",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Jan",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Feb",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',
                            },
                            {
                                "name": "Mar",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',
                            },
                            {
                                "name": "Apr",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "May",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Jun",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Jul",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Aug",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Sep",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Oct",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Nov",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Dec",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Jan",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Feb",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Mar",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Apr",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "May",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Jun",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Jul",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Aug",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Sep",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Oct",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Nov",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            },
                            {
                                "name": "Dec",
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year0',

                            }
                        ]
                    }
                ]
            });

https://jsfiddle.net/yasirunilan/Lwbmauks/7/

What I want to have is to show how the sales distribution has happen over months of each year. If I take sales distribution by 3 Years it should show each month of each year on the X axis. When I tried it seems like as month names are same they get plot in to same point even though they are of different years.

Following image shows exact way that I need it.Is there any way that it can be done?

Expected Behaviour

1 answer

  • answered 2018-09-17 08:33 ppotaczek

    As @Core972 noticed, you should use 'Grouped Categories' plugin. You can create new format of categories, based on existing ones and update axis in this way:

      render: function() {
        if (redrawEnabled) {
          var xAxis = this.xAxis[0],
            categories = xAxis.names,
            year = 2015,
            months = [],
            newCategories = [];
    
          Highcharts.each(categories, function(name, i) {
            months.push(name);
    
            if (name === 'Dec') {
              newCategories.push({
                name: year,
                categories: months.slice()
              });
              year++;
              months.length = 0;
            }
            if (i === categories.length - 1) {
              redrawEnabled = false;
              xAxis.update({
                categories: newCategories
              });
              redrawEnabled = true;
            }
          });
        }
      }
    

    Live demo: https://jsfiddle.net/BlackLabel/vnLy3pwq/