Color plots by value in polar chart - Javascript highcharts

Javascript examples for highcharts:Chart Color

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

Description

Color plots by value in polar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
jQuery(function () {/*from  www. ja v a 2s.  c  o  m*/
    jQuery("#container").highcharts({
        "chart": {
            "polar": true,
                "type": "line"
        },
            "title": {
            "text": "VIDA PESSOAL"
        },
            "legend": {
            "enabled": false
        },
            "pane": {
            "size": "80%"
        },
            "xAxis": {
            "categories": ["fam\u00edlia\/amigos", "moradia", "sa\u00fade", "dinheiro",
                "crescimento pessoal", "crescimento profissional", "lazer"],
                "tickmarkPlacement": "on",
                "lineWidth": 0
        },
            "yAxis": {
            "tickInterval": 1,
                "min": 0,
                "max": 6
        },
            "plotOptions": {
            "line": {
                "lineWidth": 0
            },
                "series": {
                "animation": false,
                    "color": "red"
            }
        },
            "series": [{
            "name": "Pontua??o",
                "data": [2, 1, 5, 3, 1, 3, 3],
                "pointPlacement": 'on'
        }]
    }, function (chart) {
        $.each(chart.series[0].data, function (i, data) {
            if (data.y < 3) data.update({
                color: 'green'
            }, false);
        });
        chart.isDirty = true;
        chart.redraw();
    });
});

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

Related Tutorials