Charts.js to create thin donut chart background - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

Charts.js to create thin donut chart background

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/v1.0.2/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from w ww. j  a v a 2  s  . co  m
Chart.types.Doughnut.extend({
    name: "DoughnutAlt",
    initialize: function (data) {
        Chart.types.Doughnut.prototype.initialize.apply(this, arguments);       
        var originalClear = this.clear;      
        this.clear = function () {
            originalClear.apply(this, arguments)
            var ctx = this.chart.ctx;
            var firstSegment = this.segments[0];
            var gap = (firstSegment.outerRadius - firstSegment.innerRadius) * (1 - 0.3) / 2;
            ctx.save();
            ctx.fillStyle = "#EEE";
            ctx.beginPath();
            ctx.arc(firstSegment.x, firstSegment.y, firstSegment.outerRadius - gap, 0, 2 * Math.PI);
            ctx.arc(firstSegment.x, firstSegment.y, firstSegment.innerRadius + gap, 0, 2 * Math.PI, true);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }
    }
});
var pointsUsed = [
    {
        value: 44250,
        color: "#FF5F33",
    },
    {
        value: 100000,
        color: "transparent",
    },
];
var pointsUsed_ctx = document.getElementById("pointsUsed").getContext("2d");
var pointsUsed = new Chart(pointsUsed_ctx).DoughnutAlt(pointsUsed, {
    segmentShowStroke: false,
    segmentStrokeWidth: 0,
    percentageInnerCutout: 87,
    showTooltips: false,
    animationEasing: 'easeInOutCubic',
    responsive: true
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="pointsUsed" height="200" width="200"></canvas>  
   </body>
</html>

Related Tutorials