javascript - Add Custom Labels to Axes in Highcharts

Question

I have a Highchart in my application showing car sales in each month. Given a user input value for a date, chart should show car sales in last 12 months. If user filter date is 2018-09-10, it should show car sales of Sep-2017, Oct-2017, Nov-2017, Dec-2017, Jan-2018, Feb-2018, Mar-2018, Apr-2018, May-2018, Jun-2018, Jul-2018, Aug-2018, Sep-2018, Oct-2018, Nov-2018, Dec-2018.

And also I need to show a year separation in the chart itself. I found an image similar to it, . I need something like it in my chart also. Is there any way that I can do it?

The following fiddle contains a sample code. I need to show the year separation of 2017 and 2018.

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

    },
    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": "Car Sales",
            "colorByPoint": true,
            "data": [
                {
                    "name": "July",
                    "y": 62.74
                },{
                    "name": "August",
                    "y": 62.74
                },{
                    "name": "September",
                    "y": 62.74
                },{
                    "name": "October",
                    "y": 62.74
                },{
                    "name": "November",
                    "y": 62.74
                },{
                    "name": "December",
                    "y": 62.74
                },{
                    "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
                }
            ]
        }
    ]
});

https://jsfiddle.net/yasirunilan/8xvjcd5h/1/

Answer 1

You can use Highcharts.SVGRenderer to create separator line and text with year. If you always have categories on the xAxis, you can do it in this way:

function renderSeparator(xVal, chart, year) {
  var xAxis = chart.xAxis[0],
    pxVal = xAxis.toPixels(xVal + 0.5);

  chart.renderer.path([
    'M', pxVal, chart.plotTop,
    'L', pxVal, chart.plotTop + chart.plotHeight
  ]).attr({
    stroke: 'black',
    'stroke-width': 1
  }).add();

  chart.renderer.text(
    year, pxVal + 10, 70
  ).css({
    color: 'black',
    fontSize: 20
  }).attr({
    zIndex: 6
  }).add();
}

// Create the chart
Highcharts.chart('container', {
  chart: {
    events: {
      render: function() {
        var chart = this,
          xAxis = chart.xAxis[0],
          year = 2014;

        chart.renderer.text(year, chart.plotLeft + 10, 70)
          .css({
            color: 'black',
            fontSize: 20
          })
          .attr({
            zIndex: 6
          })
          .add();

        year++;

        Highcharts.each(xAxis.names, function(el, i) {
          if (el === "December") {
            renderSeparator(i, chart, year);
            year++;
          }
        });
      }
    },
    type: 'column'
  },

  ...

});

Live demo: https://jsfiddle.net/BlackLabel/0ma6efcz/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text