Previous All demos
  • Open in:

PRODUCT: Chart #3

Demo source

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

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

<!-- Chart code -->
<script>
// Themes begin
// Using default theme
am4core.useTheme(am4themes_animated);
// Themes end

am4core.options.commercialLicense = true;



var chart = am4core.create("chartdiv", am4charts.RadarChart);

chart.data = [
  {
    category: "One",
    value1: 8,
    value2: 2,
    value3: 4,
    value4: 3
  },
  {
    category: "Two",
    value1: 11,
    value2: 4,
    value3: 2,
    value4: 4
  },
  {
    category: "Three",
    value1: 7,
    value2: 6,
    value3: 6,
    value4: 2
  },
  {
    category: "Four",
    value1: 13,
    value2: 8,
    value3: 3,
    value4: 2
  },
  {
    category: "Five",
    value1: 12,
    value2: 10,
    value3: 5,
    value4: 1
  },
  {
    category: "Six",
    value1: 15,
    value2: 12,
    value3: 4,
    value4: 4
  },
  {
    category: "Seven",
    value1: 9,
    value2: 14,
    value3: 6,
    value4: 2
  },
  {
    category: "Eight",
    value1: 6,
    value2: 16,
    value3: 5,
    value4: 1
  }
];
chart.radius = am4core.percent(95);
chart.startAngle = 260;
chart.endAngle = 280;
chart.innerRadius = am4core.percent(60);

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

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.grid.template.strokeOpacity = 0.05;
valueAxis.renderer.axisFills.template.disabled = true;
valueAxis.renderer.axisAngle = 260;
valueAxis.renderer.labels.template.horizontalCenter = "right";
valueAxis.min = 0;

var series1 = chart.series.push(new am4charts.RadarColumnSeries());
series1.columns.template.radarColumn.strokeOpacity = 1;
series1.name = "Series 1";
series1.dataFields.categoryX = "category";
series1.columns.template.tooltipText = "{name}: {valueY.value}";
series1.dataFields.valueY = "value1";
series1.stacked = true;

var series2 = chart.series.push(new am4charts.RadarColumnSeries());
series2.columns.template.radarColumn.strokeOpacity = 1;
series2.columns.template.tooltipText = "{name}: {valueY.value}";
series2.name = "Series 2";
series2.dataFields.categoryX = "category";
series2.dataFields.valueY = "value2";
series2.stacked = true;

var series3 = chart.series.push(new am4charts.RadarColumnSeries());
series3.columns.template.radarColumn.strokeOpacity = 1;
series3.columns.template.tooltipText = "{name}: {valueY.value}";  
series3.name = "Series 3";
series3.dataFields.categoryX = "category";
series3.dataFields.valueY = "value3";
series3.stacked = true;

var series4 = chart.series.push(new am4charts.RadarColumnSeries());
series4.columns.template.radarColumn.strokeOpacity = 1;
series4.columns.template.tooltipText = "{name}: {valueY.value}";
series4.name = "Series 4";
series4.dataFields.categoryX = "category";
series4.dataFields.valueY = "value4";
series4.stacked = true;

chart.seriesContainer.zIndex = -1;

chart.startAngle = 249.31;
chart.endAngle = 290.69;
valueAxis.renderer.axisAngle = chart.startAngle;

chart.padding(45, 15, 25, 15);
</script>

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