Add Custom Labels To Axes In Highcharts

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 201

Solution 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:

functionrenderSeparator(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 chartHighcharts.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