CODEWITHSUNDEEP
javascripthighcharts
Amal
Amal

Reputation: 222

Highcharts yAxis.max manage tick intervals dynamically

I'm trying to set the max and min of y value dynamically based on the data but it is having some troubles for some values. I think the highchart couldn't set values that doesn't have a proper tick.

For eg: min: 3 and max 10. Then, the highchart won't set these values instead of that it will set a value ranging from 0...14. This is just an example value, sometimes I get 36000.14 as min and 454533.18 as max.

So my logic isn't working in that case.
This is the part of code which I currently have:

data = [3.43, 3.58, 4.86, 8.55, 8.77, 4.44, 9.67]

maximum_val = Math.ceil(maximum_val) eg: 10
minimum_val = Math.floor(minimum_val) eg: 3
evolution_options.yAxis[$('#div_count_'+div).find('#y_axis_lbl').text()] = {
  min: minimum_val,
  max: maximum_val,
  title: false,
  labels: {
    style: {
      color: 'black'
    }
  }
}

Update

Fiddle : http://jsfiddle.net/e3fy1vu9/

Further Brainstorming

I think it is because the min value isn't a multiple of the max value so Highchart couldn't calculate how to split the tick. If there was any way so I could set the max value as the multiple of the min value.

Upvotes: 0

Views: 406

Answers (2)

Amal
Amal

Reputation: 222

Hi I have fixed it by setting this alignTicks:false option.

evolution_options.yAxis[$('#div_count_'+div).find('#y_axis_lbl').text()] = {
  min: minimum_val,
  max: maximum_val,
  title: false,
  labels: {
    style: {
      color: 'black'
    }
  },
  alignTicks: false
}

Upvotes: 0

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

Here is my advice how to calculate the max and min for yAxis from the defined data.

Demo: https://jsfiddle.net/BlackLabel/0qwt1kx7/

  yAxis: {
    min: Math.floor(Math.min(...data)),
    max: Math.round(Math.max(...data)),
    tickAmount: Math.round(Math.max(...data)) - Math.floor(Math.min(...data)) + 1 //1 count the min or max as itself
  },

Please test it and let me know if it fits to your requirements. Because the tickAmount value depends on how many values is included in the data array and probably some modifications are needed for larger data.

EDIT:

Try to use this custom solution to calculate the yAxis positions:

Demo: http://jsfiddle.net/BlackLabel/ztaj6Lkd/

var positions = [],
    tickNumbers = 5,
    tick = Math.floor(Math.min(...data));

for(let i = 0; i < tickNumbers; i++) {
    positions.push((Math.round(tick * 100) / 100));
  tick += Math.round(Math.max(...data)) / tickNumbers
}
//add the max 
positions.push(Math.round(Math.max(...data)))

Upvotes: 1

Related Questions