CODEWITHSUNDEEP
javascripthighcharts
Rustam Fatkullin
Rustam Fatkullin

Reputation: 49

Highcharts: Syncing axis ticks across Multiple Charts

I have a problem with syncing ticks of two distinct Highcharts charts.

First chart shows one day events, second chart shows continuous events. And there are requirements xAxis must be synced. In the internet I have found examples of syncing, but something goes wrong. In the picture enter image description here we see that at some moment ticks start be not synced. My code On jsfiddle and there: 

var weekInterval = 7 * 24 * 60 * 60 * 1000;

var startDate = new Date(2016, 1, 1).getTime();
var endDate = new Date(2017, 1, 1).getTime();

Highcharts.chart({
    chart: {
    renderTo: "chart_1",
    height: "350px",
    marginLeft: 100,  
    },
  title: {
    text: 'Chart 1'
  },
  yAxis: {
    title: {
        text: ''
    },
    labels: {
        enabled: false
    }
  },
  xAxis: {
    startOnTick: true,
    tickInterval: weekInterval,
    type: 'datetime',
    min: startDate,
    max: endDate,
    labels: {
        enabled: false
    }
  },
  series: [
    {
        data: constructFakeData1(startDate, endDate)
    }
  ]
})

Highcharts.chart({
    chart: {
    renderTo: "chart_2",
    height: "350px",
    inverted: true,
    marginLeft: 100,  
    },
  title: {
    text: 'Chart 2'
  },  
  xAxis: {
    title: {
        text: ''
    },
    labels: {
        enabled: false
    }
  },
  yAxis: {
    startOnTick: true,
    tickInterval: weekInterval,
    type: 'datetime',
    min: startDate,
    max: endDate,
    labels: {
        enabled: false
    }
  },
  series: [
    {
        type: 'columnrange',
        data: constructFakeData2(startDate, endDate)
    }
  ]
})


function constructFakeData1(startDate, endDate) {   
    var data = []

  for (var x = startDate; x < endDate; x += weekInterval) {
    data.push({
        x: x,
      y: Math.random() * 100
    }); 
  }

  return data;
}

function constructFakeData2(startDate, endDate) {   
    return  [[0, startDate, (startDate + endDate) / 2],
    [1, startDate / 3, endDate / 3],
    [2, startDate, endDate]]
}

Upvotes: 0

Views: 192

Answers (1)

ppotaczek
ppotaczek

Reputation: 39079

You need to disable endOnTick option for yAxis, because it is enabled by default:

yAxis: {
    endOnTick: false,
    ...
},

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

API: https://api.highcharts.com/highcharts/yAxis.endOnTick

Upvotes: 1

Related Questions