[Solved]-Highcharts, chart with two series starting in diferent points, how yo show single column?-Highcharts

For example, in the JSFiddle linked above i'd like to se January as a wider column instead of the thin one with an empty space on the right. Is that possible?

It is possible, however it will require a bit of custom code. The better solution is to centre the single column.

Code:

var maxGroupedColumns = 0;

Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      load: function() {
        var newSeriesArr = [],
          chart = this,
          groupedSeries = {},
          pointOffset;


        // create a new series for each point
        for (var i = chart.series.length - 1; i >= 0; i--) {
          var series = chart.series[i];

          var pointsInSeries = series.points.length;
          for (var j = pointsInSeries - 1; j >= 0; j--) {
            var point = series.points[j];

            // omit the point if its y value equals to 0 
            if (!point.y) {
              continue;
            }

            // make sure that x property of each point is initialized
            point.options.x = point.x;

            var newSeriesOptions = {
              data: [point.options],
              // move relevant options from the original series
              color: series.color,
              name: series.name,
              // linking series items in legend
              linkedTo: series.options.id
            };

            if (!groupedSeries[point.x]) {
              // create group
              groupedSeries[point.x] = [];
            }

            // create series and assign it to group
            groupedSeries[point.x].push(chart.addSeries(newSeriesOptions, false));

            if (groupedSeries[point.x].length > maxGroupedColumns) {
              // update max grouped columns number
              maxGroupedColumns = groupedSeries[point.x].length;
            }

            point.remove(false);
          }

          //series.remove(false);
          series.setData([]);
        }

        // handle pointPlacement for each series
        pointOffset = 1 / maxGroupedColumns;
        for (var x in groupedSeries) {
          var group = groupedSeries[x];

          group.forEach(function(series, index) {
            series.update({
              pointPlacement: pointOffset * index - ((group.length - 1) * pointOffset) / 2,
            }, false);
          });
        }

        chart.redraw();
      }
    }
  },
  title: {
    text: 'Monthly Average Temperature'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  yAxis: {
    title: {
      text: 'Temperature (°C)'
    }
  },
  plotOptions: {
    column: {
      dataLabels: {
        enabled: true
      },
      grouping: false,
      pointRange: 1,
      pointPadding: 0.25,
    }
  },
  series: [{
    name: 'Tokyo',
    id: 'Tokyo',
    data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  }, {
    name: 'London',
    id: 'London',
    data: [null, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
  }]
});

Demo: https://jsfiddle.net/wchmiel/1wph8ojx/3/