Set color and negative color for series - Javascript highcharts

Javascript examples for highcharts:Chart Series

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Series

Description

Set color and negative color for series

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts test tool</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script> 
      <script type="text/javascript">
$(function () {//from   w ww  .  j ava2s .c  om
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {
       $('#container').highcharts({
          chart: {
              type: 'arearange'
          },
          title: {
              text: 'Temperature variation by day'
          },
          xAxis: {
              type: 'datetime'
          },
          yAxis: {
              title: {
                  text: null
              }
          },
          tooltip: {
              crosshairs: true,
              shared: true,
              valueSuffix: '?C'
          },
          legend: {
              enabled: false
          },
          series: [{
              name: 'Temperatures',
              data: data,
              color: '#FF0000',
              negativeColor: '#0088FF'
          }]
      });
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://github.highcharts.com/v3.0Beta/highcharts.js"></script> 
      <script src="https://github.highcharts.com/v3.0Beta/highcharts-more.js"></script> 
      <div id="container" style="height: 400px; width: 600px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials