CODEWITHSUNDEEP
javascripthighcharts
Dan
Dan

Reputation: 527

Highcharts: Change spline line color according to y value

My yAxis section looks like this:

yAxis: {
                    title: {
                      text: 'Height of tide<br>in feet.'
                        },
                        gridLineColor: '#197F07',
                        gridLineWidth: 0,
                        lineWidth:1,
                        plotLines: [{
                            color: '#FF0000',
                            width: 1,
                            value: 0
                    }]
                },

How to I change the color of the line (to red) for y = <0?

Upvotes: 0

Views: 131

Answers (1)

Ashu
Ashu

Reputation: 2266

You can use the negativeColor property to change the colors. The color for the parts of the graph or points that are below the threshold. Default threshold is 0. 

Highcharts.chart('container', {

  series: [{
    data: [-6.4, -5.2, -3.0, 0.2, 2.3, 5.5, 8.4, 8.3, 5.1, 0.9, -1.1, -4.0],
    negativeColor: '#FF0000'
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

API Reference: https://api.highcharts.com/highcharts/plotOptions.line.negativeColor

Upvotes: 1

Related Questions