CODEWITHSUNDEEP
charts
Harshit
Harshit

Reputation: 286

how to display data values in half donuts on Chart.js

i would like to ask is it possible to display data values on a half donuts chart? Want to show the data value as text at the bottom of the chart by taking its value from the array here is the link: https://jsfiddle.net/z638ttv0/16/

Thanks for the help in advance

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Red"],
        datasets: [{
            label: '# of Votes',
            data: [50,100-50],
            backgroundColor: [

                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [

                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        rotation: 1 * Math.PI,
        circumference: 1 * Math.PI
    }
});

Upvotes: 1

Views: 11173

Answers (1)

Alfin Paul
Alfin Paul

Reputation: 1621

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Red"],
        datasets: [{
            label: '# of Votes',
            data: [50,100-50],
            text: "ff",
            backgroundColor: [
             
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
               
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        rotation: 1 * Math.PI,
        circumference: 1 * Math.PI
    }
});
.test
{
  position:absolute;
  bottom:-20px;
  left:calc(50% - 10px);
  display:block;
}
<body>
<span class="test">test</span>
  <canvas id="myChart" width="400" height="400"></canvas>
  

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

</body>

Customised value

Upvotes: 5

Related Questions