Highcharts time series combo graph where few months data is null

Question

I am trying to develop a multi axis combo graph using highcharts api with months in x-axis and multiple y axis with 2 axes having percentages and 1 having number. This is similar to what you see in this link. This works fine when you have the y axes data for all 12 months. In some cases y axes data for few months are missing. In that case I still want to show the month in the x axis with no data. Currently if I have y axes data for only 2 months (say June and December), it would show as the data for Jan and Feb instead. Please find the code which I'm using and let me know what can be the resolution for this.

var chartMonthlyData = {
                  title: {
                      text: ''
                  },
                  xAxis: [{
                      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                      crosshair: true
                  }],
                  yAxis: [{
                    min: 0,
                    max: 50,
                    labels: {
                          format: '{value} %'
                      },
                    title: {
                          enabled: false
                      },
                    opposite: true
                  }, {
                      title: {
                          text: '',
                      },
                      labels: {
                        formatter: function () {
                                return this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            }
                      }
                  }, {
                      min: 0,
                      max: 50,
                      title: {
                        enabled : false
                      },
                      labels: {
                          enabled: false
                      },
                      opposite: true
                  }],
                  tooltip: {
                      shared: true
                  },
                  legend: {
                      layout: 'horizontal',
                      align: 'right',
                      x: -30,
                      verticalAlign: 'top',
                      y: -5,
                      floating: true,
                      backgroundColor: '#FFFFFF'
                  },
                  series: [{
                      color: '#C8102E',
                      name: 'Delivered',
                      type: 'column',
                      yAxis: 1,
                      data: deliveredMonthly,
                      tooltip: {
                            pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>'
                             + '{point.y}' +'</b><br/>'
                      }
                  }, {
                      color: '#AAAAAA',
                      name: 'Open Rate',
                      type: 'line',
                      yAxis: 2,
                      data: openRateMonthly,
                      lineWidth: 4,
                      marker: {
                          enabled: true,
                          "symbol": "circle"
                      },
                      tooltip: {
                          valueSuffix: ' %'
                      }
                  }, {
                      color: '#5891c8',
                      name: 'Clickthrough Rate',
                      type: 'line',
                      data: clickThroughRateMonthly,
                      lineWidth: 4,
                      marker: {
                          enabled: true,
                          "symbol": "circle"
                      },
                      tooltip: {
                          valueSuffix: ' %'
                      }
                  }]
          }

In this image, actual months in x axis are January, June and August. I need the 12 months to be shown in the graph with the y axes data properly tied with months.

Answer 1

Get proper data from server side or update the data before providing to highcharts

data: [49.9, 71.5, 106.4, null, null, null, null, null,null, null, null, null],

add or substitute null to data series with no values corresponding to month in order to have series length same as categories

Fiddle demo