Polar Chart

Polar chart displays multivariate data in the form of a two-dimensional chart of more than three variables represented on axes starting from the same point. Polar chart is also called radar chart, spider chart, web chart, star chart or star plot. <h2>Polar chart using amCharts</h2> Our library supports polar chart, and there is a special chart type for it - <a href="http://docs.amcharts.com/3/javascriptcharts/AmRadarChart">AmRadarChart</a>. Our polar chart can have any number (more than three) of axes. The grid of radar chart can be made of circles, like in this example or of rectangles and this makes it <a href="/demos/radar-chart/">Radar chart</a> <h2>Angular Fills on polar chart</h2> Our radar chart uses regular <a href="http://docs.amcharts.com/3/javascriptcharts/ValueAxis">ValueAxis</a> so it also supports <a href="http://docs.amcharts.com/3/javascriptcharts/Guide">Guides</a> and <a href="http://docs.amcharts.com/3/javascriptcharts/TrendLine">Trend Lines</a>. The blue and red fill in the example above is made using guides.

HTML

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/radar.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/dark.js"></script>
<div id="chartdiv"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Covered+By+Your+Grace);
#chartdiv {
  background: #282828 url('http://www.amcharts.com/lib/3/patterns/chalk/bg.jpg');color: #fff;	
	width	: 70%;
	height	: 500px;
}

JavaScript

var chart = AmCharts.makeChart("chartdiv", {
    "type": "radar",
        "theme": "dark",
      
        "dataProvider": [{
        "direction": "IN",
            "value": 58.31
    }, {
        "direction": "IT",
            "value": 57.21
    }, {
        "direction": "CS",
            "value": 56.49
    }, {
        "direction": "CD",
            "value": 55.58
    }, {
        "direction": "HC",
            "value": 55.29
    }, {
        "direction": "FI",
            "value": 52.73
    }, {
        "direction": "MA",
            "value": 51.45
    }, {
        "direction": "UT",
            "value": 47.98
    }, {
        "direction": "EN",
            "value": 45.61
    }, {
        "direction": "TS",
            "value": 38.56
    }],
        "valueAxes": [{
        "gridType": "circles",
            "minimum": 10,
            "maximum": 80,
            "autoGridCount": false,
            "axisAlpha": 0.5,
            "fillAlpha": 0,
            "fillColor": "#FFFFFF",
            "gridAlpha": 0,
            "guides": [{
            "angle": -180,
                "fillAlpha": 0.3,
                "fillColor": "#4db3b3",
                "tickLength": 0,
                "toAngle": 180,
                "toValue": 80,
                "value": 0,
                "lineAlpha": 0,

        }, {
            "angle": -180,
                "fillAlpha": 0.35,
                "fillColor": "#65bd6f",
                "tickLength": 0,
                "toAngle": 180,
                "toValue": 64,
                "value": 0,
                "lineAlpha": 0,

        }, {
            "angle": -180,
                "fillAlpha": 0.4,
                "fillColor": "#f2c249",
                "tickLength": 0,
                "toAngle": 180,
                "toValue": 55,
                "value": 0,
                "lineAlpha": 0,
        }, {
            "angle": -180,
                "fillAlpha": 0.45,
                "fillColor": "#e64a45",
                "tickLength": 0,
   ...