Highchart: exact distance between ticks

Question

How to find out the exact distance or set an exact distance (to pixel) between two ticks on x-axis with Highchart?

I have used tickPixelInterval, it does not seem to set the exact distance between two ticks on an axis.

Code for reference: http://jsfiddle.net/e0qxfLtt/21/

$(function drawCharts() {
  var chartData = [100, 120, 120, 140, 110, 110];
  var index = 1;
  $('#b').click(function() {
    var buttonB = document.getElementById('b');
    buttonB.disabled = true;
    if (index < chartData.length) {
      var x = index, // current time
        y = chartData[index];
      $('#container').highcharts().series[0].setData([chartData[index - 1]]);
      $('#container').highcharts().series[0].addPoint([chartData[index]]);

      setTimeout(function() {
        if (index === 1) {
          $('#container1').highcharts().series[0].addPoint([0, chartData[0]]);
        }
        $('#container1').highcharts().series[0].addPoint([x, y]);
        index++;
      }, 2000);
    }
    setTimeout(function() {
      buttonB.disabled = false;
    }, 3000);

  })
  $(document).ready(function() {
    var chart1 = new Highcharts.Chart({
      chart: {
        renderTo: 'container1',
        type: 'line',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
          load: function() {
            series = this.series[0];
          },
        }
      },
      title: {
        text: ''
      },
      xAxis: {
        title: {
          text: ''
        },
        gridLineWidth: 1,
        startOnTick: true,
        tickPixelInterval: 40,
        min: 0,
        max: 10
      },
      yAxis: {
        title: {
          text: ''
        },
        min: 0,
        max: 200
      },
      plotOptions: {
        line: {
          marker: {
            enabled: false
          }
        },
        series: {
          animation: {
            duration: 1000
          }
        }
      },
      tooltip: {
        formatter: function() {
          return Highcharts.numberFormat(this.y, 2) + 'GE';
        }
      },
      legend: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      series: [{
        name: '',
        data: []
      }]
    });
    var chart2 = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'line',
        animation: Highcharts.svg ? {
          duration: 2000
        } : false, // don't animate in old IE                marginRight: 10,
        events: {
          load: function() {
            series = this.series[0];
          },
        }
      },
      title: {
        text: ''
      },
      xAxis: {
        title: {
          text: ''
        },
        gridLineWidth: 1,
        startOnTick: true,
        tickPixelInterval: 80,
        categories: ['a', 'b'],
        min: 0,
        max: 1
      },
      yAxis: {
        title: {
          text: ''
        },
        min: 0,
        max: 200
      },
      plotOptions: {
        line: {
          marker: {
            enabled: false
          }
        },
        series: {
          animation: {
            duration: 2000
          }
        }
      },
      tooltip: {
        formatter: function() {
          return Highcharts.numberFormat(this.y, 2);
        }
      },
      legend: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      series: [{
        name: '',
        data: []
      }]
    });
  });
});

Answer 1

If you control the width of your chart, and control the width of your plot area using the margin settings, and you know how many ticks you are going to have in each chart, this is a simple matter.

So, chart 1:

width: 200,
margin: [10,25,50,75]

Two slots, each 50 pixels wide

Chart 2:

width: 600,
margin: [10,25,50,75]

10 slots, each 50 pixels wide.

Updated fiddle:

• http://jsfiddle.net/jlbriggs/k8r4s890/

Output: