Failing to display more ticks in the Highcharts histogram-CodePudding

I am trying to display more ticks in my histogram. To be more specific, I would want the first tick to be -0.5 and other ticks be spaced 0.05 from each other (-0.5, -0.45, -0.4 ...) so that the last tick is 0.5. Could someone help me with implementing this to my code?

var data = [];
for (var i = 0; i < 1000; i  ) {
  data.push(Math.random() - 0.49);
}

Highcharts.chart('container', {
  title: {
    text: 'Return distribution'
  },
  legend: {
  enabled: false
  },

  xAxis: [
  {
    title: {
      text: 'Asset 1'
    },
    alignTicks: false,
    visible: false
  }, 
  {
    title: {
      text: 'Portfolio returns'
    },
    alignTicks: false,
    opposite: false 
 }
 
 ],

  yAxis: [{
      title: {
        text: 'Asset 2'
      },
      visible: false
    },
    {
      title: {
        text: 'Frequency'
      },
      opposite: false
    }
  ],

  plotOptions: {
    histogram: {
    // binsWidth: '', takes precende over binsNumber
      binsNumber: 20
    }
  },

  series: [{
    name: '',
    type: 'histogram',
    visible: true,
    xAxis: 1,
    yAxis: 1,
    baseSeries: 's1',
    zIndex: -1,
    color: ''
  }, {
    name: '',
    type: 'scatter',
    data: data,
    id: 's1',
    visible: false,
    marker: {
      radius: 1.5
    }
  }]
});

If I insert

min: -0.5,
max: 0.5,
tickInterval: 0.05

to the xAxis config. the script won't work

Link to jsfiddle: http://jsfiddle.net/lauri1/5wgfoebs/60/

CodePudding user response：

To show first and last ticks you can set xAxis options startOnTick and endOnTick.

  xAxis: [{
      startOnTick: true,
      endOnTick: true
    }
  ]

In that case, setting xAxis.tickInterval to 0.05 it's working as you wished.

DEMO: http://jsfiddle.net/BlackLabel/y79mor0q/