Friday, October 15, 2021

PieChart


 Code 

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>

<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>

    <link rel="stylesheet" href="~/css/main.css" />

<div id="chartdiv"></div>

<script src="//cdn.amcharts.com/lib/5/index.js"></script>

<script src="//cdn.amcharts.com/lib/5/xy.js"></script>

<script src="//cdn.amcharts.com/lib/5/themes/Animated.js"></script>

<div id="chartdiv"></div>

<script>

    /**

 * ---------------------------------------

 * This demo was created using amCharts 4.

 *

 * For more information visit:

 * https://www.amcharts.com/

 *

 * Documentation is available at:

 * https://www.amcharts.com/docs/v4/

 * ---------------------------------------

 */


// Create chart instance

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


// Add data

chart.data = [{

  "country": "Lithuania",

  "litres": 501.9

}, {

  "country": "Czech Republic",

  "litres": 301.9

}, {

  "country": "Ireland",

  "litres": 201.1

}, {

  "country": "Germany",

  "litres": 165.8

}, {

  "country": "Australia",

  "litres": 139.9

}, {

  "country": "Austria",

  "litres": 128.3

}, {

  "country": "UK",

  "litres": 99

}, {

  "country": "Belgium",

  "litres": 60

}, {

  "country": "The Netherlands",

  "litres": 50

}];


// Add and configure Series

var pieSeries = chart.series.push(new am4charts.PieSeries());

pieSeries.dataFields.value = "litres";

pieSeries.dataFields.category = "country";


// Let's cut a hole in our Pie chart the size of 40% the radius

chart.innerRadius = am4core.percent(40);


// Put a thick white border around each Slice

pieSeries.slices.template.stroke = am4core.color("#4a2abb");

pieSeries.slices.template.strokeWidth = 2;

pieSeries.slices.template.strokeOpacity = 1;



// Add a legend

chart.legend = new am4charts.Legend();

</script>

No comments:

Post a Comment