Chartjs-How to compare one value to another in chartJS

by

0👍

✅

Assuming that the used data should appear in red, data should be defined as follows:

data: [used, total - used]

Please have a look at your amended code sample below.

const total = 300;
const used = 100;

var chart = new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: {
    datasets: [{
      label: 'My First dataset',
      backgroundColor: ['red', 'green'],
      borderColor: 'rgb(255, 99, 132)',
      data: [used, total - used]
    }]
  },
  options: {}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="90"></canvas>

Leave a comment