Highcharts - How to have multiple datapoints per xAxis label?

Question

I have a Highchart's graph that is displaying data from 2001 - 2020 in my array of data i'd like to assign xAxis point 2001 the first 4 indexes of my array which are 2.3, 4.2, 4.2, 4.3, have 2002 have the next 4 points etc, with keeping my xAxis categories label in tact.

At the moment because I have more data points then labels my xAxis labels eventually get cut off and HighCharts start to add numbers to the bottom of the graph.

Here is a jsfiddle

Here is a photo example:

I am attempting to have the xAxis at the bottom show what I assigned it :

xAxis: {
    categories: ['2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020']
  },

meanwhile having more then one point per year. I hope that is clear, and I am stuck on how to accomplish that in HighCharts, as I add more data the graph continues to expand with the numbers on the bottom instead of the years I am expecting.

I am expecting my Highcharts graph xAxis to appear like this

while having more than one data point per label.

Sebastian Wędzel Sebastian Wędzel · Accepted Answer · 2020-05-15T08:32:57

You can use the pointStart feature to achieve wanted result.

Demo: https://jsfiddle.net/BlackLabel/wgr253pf/

  plotOptions: {
    line: {
      dataLabels: {
        enabled: false
      },
      enableMouseTracking: false,
            pointStart: 2001
    }
  },

API: https://api.highcharts.com/highcharts/series.line.pointStart

Highcharts - How to have multiple datapoints per xAxis label?

1 Answers