.I use highcharts-vue and xAxis.tickPositioner function
chartOptions: {
chart: {
type: 'areaspline'
},
xAxis: {
tickPositioner: function () {
let positions = [],
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 10)
if (this.dataMax !== null && this.dataMin !== null) {
for (tick; tick <= this.dataMax; tick += increment) {
positions.push(tick)
}
}
return positions
}
},
series: [],
categories: []
}
mounted(){
this.chartOptions.series = [
{name: 'test1', data: [1]},
{name: 'test2', data: [2]}
]
this.chartOptions.xAxis.categories = ['category1']
}<highcharts :options="chartOptions"></highcharts>I need it because ussualy I have a lot of data point. It works good If this.chartOptions.series[i].data.length > 1. But if this.chartOptions.series[i].data.length == 1 - browser is crashed. What can I do to fix it?
Notice that for one point all your variables (tick, increment, dataMax) are equal 0, so as a consequence this for is an infinity loop.
You can check it here: https://jsfiddle.net/BlackLabel/35suo8k0/
As a solution you can use this code:
xAxis: {
tickPositioner() {
let positions = [],
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 10)
if (this.dataMax && this.dataMin) {
for (tick; tick <= this.dataMax; tick += increment) {
positions.push(tick)
}
}
return positions
}
},
I changed the if condition - now it checks if the dataMax and dataMin exist.
I fixed it by this changes:
tickPositioner: function () {
let positions = [],
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 10)
if (this.dataMax === 0) {
positions = [0]
} else if (this.dataMax !== null && this.dataMin !== null) {
for (tick; tick <= this.dataMax; tick += increment) {
positions.push(tick)
}
}
return positions
}