CODEWITHSUNDEEP
javascriptjquerychartshighcharts
J. Minjire
J. Minjire

Reputation: 1088

Highcharts multiple series with missing Data Points

Have a strange issue with Highcharts and can't seem to find a simple solution to it. I have data that I manually parse and turn into the actual series that the chart will use. e.g

{
    "type": "column",
    "name": "Drinks",
    "data": [{
      "name": "Jan 2017",
      "y": 34.523809523809526
    }, {
      "name": "Mar 2017",
      "y": 89.3312101910828
    }, {
      "name": "Apr 2017",
      "y": 91.28724002248454
    }, {
      "name": "May 2017",
      "y": 92.56756756756756
    }]
  }

The problem is that some of the data items for some of the categories are missing. Such that the first one may have all data Jan-May, while the next category may only have say Jan,Feb,May. The chart renders but it's not sorted properly. I'd expect Highcharts to just display the one bar chart for whatever series that is, but it does not. It groups the first items correctly, then kind of isolates the one data item that is not in all the series items.

See this Jsfiddle. http://jsfiddle.net/xLjf2wmp/1/

Note the last column is Feb 2017, yet in the second series it's the second data item. So my question why is highcharts ignoring the sorting? What can I do to get it to sort them correctly?

2nd Question: Is it possible to have the category labels directly beneath the columns? instead of having to use a legend and/or tooltip?

Upvotes: 0

Views: 1089

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

you add categories:['Jan 2017','Feb 2017','Mar 2017','Apr 2017','May 2017'].xAxis.categories for reference

Updated fiddle

xAxis: {
  type: 'category',
  categories:['Jan 2017','Feb 2017','Mar 2017','Apr 2017','May 2017']
},

Upvotes: 2

Related Questions