Highcharts: Different tick interval in the same axis

Question

I have a series that is composed of:

Daily values, until a certain date
6-monthly values, from that date onward

Some data example

I'd like to increase the tick interval exclusively for the second part of the chart, so I can compact the data. To be clear, I want the same space that represents one month on the left side of the chart to represent 6 months on the right side.

Some data, as I want to see it

I'm not sure if Highcharts allows this... I think there can be two different approaches:

Create two series with two different axis and set one axis after the other
Set different tickInterval for the same axis.

Using tickPositions and tickPositioner I've only managed to show more or less ticks, but always keeping their position on the time axis.

This is my code:

Highcharts.chart('container', {
    chart: {
  zoomType: 'xy',
  animation: false
},
    title: {
    text: 'Some data'
},
    legend: {
        verticalAlign: 'bottom',
        borderWidth: 0
    },
    xAxis: {
        type : 'datetime',
        tickInterval: 30 * 24 * 3600 * 1000,
        labels: {
            useHTML: true,
            rotation: -90
        },
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%b-%y',
            year: '%Y'
        },
        plotLines: [{
            color: 'gray',
            dashStyle: 'longdashdot',
            value: 1536278400000,
            width: 1,
            label: {
                text: 'Selected Date'
            }
        }]
    },
    yAxis: {
        title: {
            text: null
        },
        maxZoom: 0.1
    },
    series: jsonData

});

Here's a jsfiddle with a subset of my original data.

Which would be the best way to achieve this?

ppotaczek ppotaczek · Accepted Answer · 2018-09-12T10:43:34

Highcharts does not allow it by default, but you can use a workaround. You can create two xAxis with right size proportion and two series, like in an example below:

xAxis: [{
  type: 'datetime',
  endOnTick: false,
  tickInterval: 30 * 24 * 3600 * 1000,
  max: 1536278400000,
  width: '65%',
  labels: {
    useHTML: true,
    rotation: -90
  },
  dateTimeLabelFormats: { // don't display the dummy year
    month: '%b-%y',
    year: '%Y'
  },
  plotLines: [{
    color: 'gray',
    dashStyle: 'longdashdot',
    value: 1536278400000,
    width: 1,
    label: {
      text: 'Selected Date'
    }
  }]
}, {
  min: 1536278400000,
  startOnTick: false,
  offset: 0,
  type: 'datetime',
  tickInterval: 180 * 24 * 3600 * 1000,
  labels: {
    useHTML: true,
    rotation: -90
  },
  dateTimeLabelFormats: { // don't display the dummy year
    month: '%b-%y',
    year: '%Y'
  },
  width: '35%',
  left: '65%'
}]

Live demo: https://jsfiddle.net/BlackLabel/zxd4j5tn/

Highcharts: Different tick interval in the same axis

1 Answers