Set series negative color

Description

The following code shows how to set series negative color.

Example


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>
$(function () {<!--from   w  w w  .jav  a 2  s  .  c  om-->
    $('#container').highcharts({
        data: {
            csv: document.getElementById('csv').innerHTML,
            complete: function (options) {
                // Add another series to the output
                options.series.push({
                    name: 'Trend',
                    data: [{ x: 2000, y: -0.4 }, { x: 2010, y: 0.5 }],
                    dashStyle: 'dash'
                });
            }
        },

        series: [{
            lineWidth: 1
        }, {
            type: 'areaspline',
            color: '#c4392d',
            negativeColor: '#5679c4',
            fillOpacity: 0.5
        }]
    });
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
<pre id="csv" style="display:none">Year,Annual mean,5 year mean
2003,0.57,0.55
2004,0.9,1.56
2005,0.63,0.57
2006,0.56,0.54
2007,0.59,1.56
2008,0.44,0.56
2009,0.57,0.55
2010,0.64,0.54
2011,0.2,,0.94
2012,0.52,</pre>

</body>
</html>

Click to view the demo





















Home »
  highcharts »
    Series »




Series
Series Color
Series Data
Series Event
Series Marker
Series Style