CODEWITHSUNDEEP
angularhighcharts
tamih
tamih

Reputation: 93

angular 4 Highcharts set yAxis Categories

I am using angular4 and Highcharts . I want to create graph with two y-axis.

So :

  1. It will show only one series of data
  2. it will show 2 yaxis , one of them will have labels that I define (It have only 2 labels : 0 + max value)

how can I do that ?

I.e.

enter image description here

Upvotes: 0

Views: 826

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

Refer to this live demo: http://jsfiddle.net/kkulig/dhsgo47z/

If you want the secondary axis to have the same extremes as the primary one then a good place add the new axis is a load event (because it doesn't utilize hardcoded values):

  chart: {
    events: {
      load: function() {
        var primaryYAxis = this.yAxis[0];

        this.addAxis({
          title: {
            text: 'Secondary'
          },
          min: primaryYAxis.min,
          max: primaryYAxis.max,
          tickPositions: [0,  primaryYAxis.max],
          endOnTick: false,
          labels: {
            formatter: function() {
                return this.isLast ? "Maximum" : this.value;
            }
          }
        }, false);
      }
    }
  },

tickPositiones serves to set the exact positions of ticks (there'll be no more and no less than defined). labels.formatter is used to give the second tick a custom string value.

API reference:

Upvotes: 1

Related Questions