threshold between 3 color in line charts - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

threshold between 3 color in line charts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>multiple colors by zone</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.0.2.js"></script> 
      <script type="text/javascript">
    $(function(){//ww w  .ja  v a 2 s. c  o  m
var chart = new Highcharts.Chart({
    chart: {
        renderTo:'container',
        //type:'column'
        //type:'bar'
        //type:'area'
        //type:'scatter'
        //type:'bubble'
    },
    credits: {},
    exporting: {},
    legend: {},
    title: {},
    tooltip: {},
    plotOptions: {
        scatter: {
            marker: {
                symbol:'circle',
                radius:5
            }
        }
    },
    xAxis: {
    },
    yAxis: {
        allowDecimals:false
    },
    series:[{
        id:'main',
        type:'line',
        color:'#999',
        marker: { enabled:false },
        data:[2,3,5,8,15,5,7,4]
    },{
        linkedTo:'main',
        name:'=5',
        type:'scatter',
        color:'rgba(104,104,104,1)',
        data:[[2,5],[5,5]]
    },{
        linkedTo:'main',
        name:'>5',
        type:'scatter',
        color:'rgba(90,155,212,1)',
        data:[[3,8],[4,15],[6,7]]
    },{
        linkedTo:'main',
        name:'<5',
        type:'scatter',
        color:'rgba(241,90,96,1)',
        data:[[0,2],[1,3],[7,4]]
    }]
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="height:400px;margin:1.5em 1em;"></div>  
   </body>
</html>

Related Tutorials