CODEWITHSUNDEEP
highcharts
darkpool
darkpool

Reputation: 14641

YAxis labels and series color the same

I have a chart with two series. One series uses the left YAxis, the other uses the right YAxis. I would like the labels on each axis to have the same color as their respective series.

I know this can be done by manually assigning the colors, eg:

  yAxis: [
    {
      labels: {
        style: {
          color: "red"
        }
      }
    },
    {
      labels: {
        style: {
          color: "green"
        }
      }
    }
  ],
  series: [
    {
      color: "red",
      yAxis: 0,
      data: []
    },
    {
      color: "green",
      yAxis: 1,
      data: []
    }
  ]

But I would ideally prefer not to assign colors manually. When you don't specify any colors, the series colors are set automatically. I would like for the corresponding axis labels to have the same color.

Upvotes: 0

Views: 442

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

To change the colors automatically, you can use the chart load event and update y-axes:

chart: {
    events: {
        load: function() {
            this.series.forEach(function(s) {
                s.yAxis.update({
                    labels: {
                        style: {
                            color: s.color
                        }
                    }
                }, false);
            });

            this.redraw();
        }
    }
}

Live demo: http://jsfiddle.net/BlackLabel/u0myw5az/

API Reference:

https://api.highcharts.com/highcharts/chart.events.load

https://api.highcharts.com/class-reference/Highcharts.Axis#update

Upvotes: 1

Related Questions