Can I Sychronize Two Highcharts Series With Different Years (leap Year)

The problem is best described in following fiddle: https://jsfiddle.net/bernhard_kern/85s2fm5a/3/. We use two series and two xAxis. xAxis: [{ type: 'datetime', min:

Solution 1:

I would approach it this way:

1) use a single x axis, with a pointStart using the current year (or, whichever year is a leap year, to make sure you can account for the leap day. It doesn't even matter what year is used here, as long as it is a leap year. You could use 1976 with no effect on the end result)

2) at the date of the leap day, in the data series that does NOT have a leap day, insert a null value

3) use series name to denote the year in question, and in the tooltip (and/or anywhere else that you need to display the date), format the date to return without the year.

Code example:

  $('#container').highcharts({
    chart: {
      renderTo: 'container'
    },
    plotOptions: {
      series: {
        pointStart: Date.UTC(2016, 1, 22),
        pointInterval: 24 * 3600 * 1000 // one day
      }
    },
    tooltip: {
      shared: true,
      crosshairs: true,
      dateTimeLabelFormats : {
        day:"%b %e"
      }
    },
    xAxis: {
      type: 'datetime'
    },
    series: [{
      name: '2015',
      data: [176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, null, 71.5, 106.4, 129.2, 144.0],
    },{
      name:'2016',
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    }]
  });

Fiddle:

• https://jsfiddle.net/85s2fm5a/5/