From 0 to 50Use up and down arrows to move selectionFrom 0Use up and down arrows to move upper selectionTo 50Use up and down arrows to move lower selectionUse TAB select grip buttons or up and down arrows to change selectionFrom 0 to 9Use left and right arrows to move selectionFrom 0Use left and right arrows to move left selectionTo 9Use left and right arrows to move right selectionUse TAB to select grip buttons or left and right arrows to change selection100%Chart created using amCharts library
  • Open in:

Polar area chart

Polar area chart (also known as Polar area diagram, Coxcomb chart, Rose chart) is often used to plot cyclical data like average monthly temperature, hourly traffic to a website, etc.

One of the most famous early uses of polar area chart is “Diagram of the causes of mortality in the army in the East” by Florence Nightingale.

Demo source

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.RadarChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

let data = []
for(let i = 0; i < 10; i++){
  data.push({category:i, value1:Math.round(Math.random() * 10), value2:Math.round(Math.random() * 10), value3:Math.round(Math.random() * 10), value4:Math.round(Math.random() * 10)})
}

chart.data = data;
chart.radius = am4core.percent(100);

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.labels.template.location = 0.5;
categoryAxis.renderer.tooltipLocation = 0.5;
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.labels.template.disabled = true;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.labels.template.horizontalCenter = "left";
valueAxis.renderer.grid.template.disabled = true;

var series1 = chart.series.push(new am4charts.RadarColumnSeries());
series1.name = "Series 1";
series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value2";
series1.stroke = am4core.color("#ffffff");
series1.columns.template.strokeOpacity = 0.2;
series1.stacked = true;
series1.sequencedInterpolation = true;
series1.columns.template.width = am4core.percent(100);
series1.columns.template.tooltipText = "{valueY}";

var series2 = chart.series.push(series1.clone());
series2.name = "Series 2";
series2.fill = chart.colors.next();
series2.dataFields.valueY = "value2";

var series3 = chart.series.push(series1.clone());
series3.name = "Series 3";
series3.fill = chart.colors.next();

series3.dataFields.valueY = "value3";

var series4 = chart.series.push(series1.clone());
series4.name = "Series 4";
series4.fill = chart.colors.next();
series4.dataFields.valueY = "value4";

chart.seriesContainer.zIndex = -1;

chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.exportable = false;
chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarY.exportable = false;

chart.cursor = new am4charts.RadarCursor();
chart.cursor.xAxis = categoryAxis;
chart.cursor.fullWidthXLine = true;
chart.cursor.lineX.strokeOpacity = 0;
chart.cursor.lineX.fillOpacity = 0.1;
chart.cursor.lineX.fill = am4core.color("#000000");

}); // end am4core.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>