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>

Chart Code

 there Code 

@model List<transation>

@{

    var XLabels = Newtonsoft.Json.JsonConvert.SerializeObject( Model.Select( x => x.Application ).ToList() );

    var YValues = Newtonsoft.Json.JsonConvert.SerializeObject( Model.Select( x => x.Qty ).ToList() );

    ViewData["Title"] = "Bar Chart";

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Bar</title>

</head>

<body>

    <div class="box-body">

        <div class="chart-container">

            <canvas id="chart" style="width:100%; height:500px"></canvas>

        </div>

    </div>

</body>

</html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script type="text/javascript">

     setTimeout(function(){

         window.location.reload(1);

            }, 5000);

        $(function () {

    var chartName = "chart";

        var ctx = document.getElementById(chartName).getContext('2d');

        var data = {

                labels: @Html.Raw(XLabels),

                datasets: [{

                    label: "Departments Chart",

                    backgroundColor: [

                        'rgba(255, 99, 132, 0.2)',

                        'rgba(54, 162, 235, 0.2)',

                        'rgba(255, 206, 86, 0.2)',

                        'rgba(75, 192, 192, 0.2)',

                        'rgba(153, 102, 255, 0.2)',

                        'rgba(255, 159, 64, 0.2)',

                        'rgba(255, 0, 0)',

                        'rgba(0, 255, 0)',

                        'rgba(0, 0, 255)',

                        'rgba(192, 192, 192)',

                        'rgba(255, 255, 0)',

                        'rgba(255, 0, 255)'

                    ],

                    borderColor: [

                        'rgba(255,99,132,1)',

                        'rgba(54, 162, 235, 1)',

                        'rgba(255, 206, 86, 1)',

                        'rgba(75, 192, 192, 1)',

                        'rgba(153, 102, 255, 1)',

                        'rgba(255, 159, 64, 1)',

                        'rgba(255, 0, 0)',

                        'rgba(0, 255, 0)',

                        'rgba(0, 0, 255)',

                        'rgba(192, 192, 192)',

                        'rgba(255, 255, 0)',

                        'rgba(255, 0, 255)'

                    ],

                    borderWidth: 1,

                    data: @Html.Raw(YValues)

    }]

            };

var options = {

                maintainAspectRatio: false,

                scales: {

                    yAxes: [{

                        ticks: {

                            min: 0,

                            beginAtZero: true

                        },

                        gridLines: {

                            display: true,

                            color: "rgba(255,99,164,0.2)"

                        }

}],

                    xAxes: [{

                        ticks: {

                            min: 0,

                            beginAtZero: true

                        },

                        gridLines: {

                            display: false

                        }

                    }]

                }

            };

       var myChart = new  Chart(ctx, {

                options: options,

                data: data,

                type:'bar'

            });

        });

</script>