How to Show Same Month name of two years in X axis of Highcharts

Question

I have a Highcharts chart in my application. I need to display how many cars have been sold in each month of the year and this chart shows car selling over 13 months time period(Ex: June 2017- June 2018) so that same month(of two years) is displayed two times. X category should be something like (Jun, Jul, Aug, Sep, Oct, Nov, Dec, Jan, Feb, Mar, Apr, May, Jun)

But the problem is chart shows only one "Jun" month in the graph. I think category name duplication is the error. Is there a workaround for this to get done?

Here is what I have tried so far:

// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Car Sales'
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: 'Total percent car salee'
        }

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

    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },

    "series": [
        {
            "name": "Browsers",
            "colorByPoint": true,
            "data": [
                {
                    "name": "January",
                    "y": 62.74,
                },
                {
                    "name": "February",
                    "y": 10.57,
                },
                {
                    "name": "March",
                    "y": 7.23,
                },
                {
                    "name": "April",
                    "y": 5.58,
                },
                {
                    "name": "May",
                    "y": 4.02,
                },
                {
                    "name": "June",
                    "y": 1.92,
                },
                {
                    "name": "July",
                    "y": 7.62,
                },
                {
                    "name": "August",
                    "y": 7.62,
                },
                {
                    "name": "September",
                    "y": 7.62,
                },
                {
                    "name": "October",
                    "y": 7.62,
                },
                {
                    "name": "November",
                    "y": 7.62,
                },
                {
                    "name": "December",
                    "y": 7.62,
                },
                {
                    "name": "January",
                    "y": 7.62,
                }
            ]
        }
    ],
});

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JSfiddle link: https://jsfiddle.net/yasirunilan/2ryfnv3q/

Can you please add in the code? Right now we can't reproduce the error. — user9420984
This is the code, jsfiddle.net/yasirunilan/2ryfnv3q even though I have two January months it shows up in same column in the graph — Yasiru Nilan

Unknown Unknown · Accepted Answer · 2018-09-12T07:29:22

The easiest way to get to achieve this inside the drilldown, is to 'cheat' with the name of the category. If you are able to add in a space (or any other random character) at the end of the second Jan in the drilldown, it will solve the problem.

Click here for a fiddle demonstrating the solution.

 "drilldown": {
        "series": [
            {
                "name": "Chrome",
                "id": "Chrome",
                "data": [
                    {
                        "name": "Jan",
                        "y": 0.1
                    },
                    {
                       "name": "Feb",
                        "y": 0.1
                    },
                    //snip
                    {
                        "name": "Jan ",
                        "y": 0.1
                    }
                ]
            },

How to Show Same Month name of two years in X axis of Highcharts

1 Answers