CODEWITHSUNDEEP
javascripthighcharts
bigbitecode
bigbitecode

Reputation: 263

Dynamically display percent on y-axis using highchart

I have a series of data that follows the following schema:

[x-axis data, y-axis data, y-axis data]

I have two y-axis data so that I can change one of the yaxis data to show the percent value relative to the current max y-axis data such that the following is true:

[x-axis data, y-axis data, percentage based on current max(y-axis)]

The current max(y-axis) is based on the current zoom level done by the client (drag zoom graph).

So here's the problem: How can I set the y axis to always show 0 to 100 and show the line height based on the percentage? Currently the values are posted as a label to the corresponding bar depending on the zoom, but I'm at a loss as to how to use those values and correspond them to a 0 - 100 y axis graph. The tricky part is having them dynamically changed when the user zooms in.

Here's what I have at the moment: http://jsfiddle.net/6mMZS/7/

Here's an example: enter image description here

Upvotes: 0

Views: 6473

Answers (1)

Oriol
Oriol

Reputation: 288130

Demo: http://jsfiddle.net/6mMZS/10/

You can use

yAxis: {
  /* Other things */
  labels: {
    formatter: function(){
      return 100 * this.value / $(this.axis.tickPositions).last()[0] + '%';
    }
  }
}

Upvotes: 3

Related Questions