Pie Chart

by MISLab

HTML

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

JavaScript

/**
 * ---------------------------------------
 * This demo was created using amCharts 5.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v5/
 * ---------------------------------------
 */

// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");

// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
  am5themes_Animated.new(root)
]);

// Create chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
var chart = root.container.children.push(
  am5percent.PieChart.new(root, {
    endAngle: 270
  })
);

// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
var series = chart.series.push(
  am5percent.PieSeries.new(root, {
    valueField: "value",
    categoryField: "category",
    endAngle: 270
  })
);

series.states.create("hidden", {
  endAngle: -90
});

// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series.data.setAll([{
  category: "Sustainable Forest Management",
  value: 214.54
}, {
  category: "Soil & Moisture Conservation",
  value: 77.79
},{
  category: "Livelihood Development",
  value: 153.93
},{
  category: "Institutional Strengthening",
  value: 171.23
},{
  category: "Price Escalation",
  value: 134.97
},{
  category: "Physical Contingency",
  value: 37.61
},{
  category: "Consulting Services (PMC)",
  value: 28.59
}, {
  category: "Land Acquisition",
  value: 0.00
}, {
  category: "Administrative Cost",
  value: 73.62
}, {
  category: "GST",
  value: 48.53
}, {
  category: "Front End Fee",
  value: 1.53
}, {
  category: "Interest during Construction",
  value: 56.81
}]);

series.appear(1000, 100);