Chartjs to change the notation of doughnut chart - Javascript Chart.js

Javascript examples for Chart.js:Doughnut Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Doughnut Chart

Description

Chartjs to change the notation of doughnut chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/f3eb6f4a433b4f34a582842dcf7b42f710861a7d/Chart.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from   ww  w. j a  v  a 2s .c o  m
    var doughnutChartConfig = {
        type: 'doughnut',
        options: {
            events: false,
            animation: {
                duration: 0
            },
            onAnimationComplete: function () {
                var self = this;
                var elementsArray = [];
                Chart.helpers.each(self.data.datasets, function (dataset, datasetIndex) {
                    Chart.helpers.each(dataset.metaData, function (element, index) {
                        var tooltip = new Chart.Tooltip({
                            _chart: self.chart,
                            _data: self.data,
                            _options: self.options,
                            _active: [element]
                        }, self);
                        tooltip.update();
                        tooltip.transition(Chart.helpers.easingEffects.linear).draw();
                    }, self);
                }, self);
            }
        },
            data: {
                datasets: [{
                    data: [
                        2,
                        4,
                        7,
                        1,
                        6,
                    ],
                    backgroundColor: [
                        "Red",
                        "Green",
                        "Yellow",
                        "Grey",
                        "Purple",
                    ],
                }],
                labels: [
                    "Red",
                    "Green",
                    "Yellow",
                    "Grey",
                    "Purple"
                ]
            },
        };
        var ctx = document.getElementById("chart").getContext("2d");
        var doughnutchart = new Chart(ctx, doughnutChartConfig);
    }

      </script> 
   </head> 
   <body> 
      <canvas id="chart" height="450" width="640"></canvas>  
   </body>
</html>

Related Tutorials