Search code examples
highchartshistogram

Highcharts histogram merges last and second last column together


So the problem is that my last two columns merge together into one. In this case i have as wel values of 9 as of 10 in my array but it just adds the number of 9's and 10's together and labels them all as 9 in the histogram. The result is shown in the picture histogram. You can find my code here https://jsfiddle.net/vlovlo/ypv1jg3u/5/

 let testArray = [0,0,0,1,1,1,1,1,2,2,3,3,4,4,4,4,5,5,6,6,6,6,7,7,7,8,8,8,8,8,9,9,9,10,10,10,10]



 Highcharts.chart('test', {
    title: {
        text: 'test',
        margin: 50,
        style:{
          fontWeight: "bold",
        },
    },

xAxis: [{
    visible: false,
}, {
    title: { 
      text: 'test x',
      style:{
        fontWeight: "bold",
      },
    },
    showLastLabel: true,
}],

yAxis: [{
    visible: false
}, {
  title: { 
    text: 'test x',
    style:{
      fontWeight: "bold",
    },
  },
}],

plotOptions: {
  series: {
    borderWidth: 0,
    pointPlacement: 'between',
    dataLabels: {
      enabled: true
    },
  },
  histogram: {
        binWidth: 1
    }
    
},

series: [{
  name: 'Test',
  type: 'histogram',
  yaxis: 1,
  xAxis: 1,
  baseSeries: 'testSeries'
},
{
  id: 'testSeries',
  visible: false,
  data: testArray
}]
});

Solution

  • Try to set the binWidth as 0.99

    Demo: https://jsfiddle.net/BlackLabel/doqgcy0z/