Changing font size of labels in doughnut chart and increase it's circumference-CodePudding

I Want to increase the size of labels Multimeter, Unibox, and all... i also want to increase the circumference of the chart and align it properly. How I will be able to achieve it.

my code looks like; I am beginer in web dev, so looking for kind help.

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>

<canvas id="myChart" style="width:100%;max-width:600px"></canvas>

<script>
    function getColors(length) {
        let pallet = ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"];
        let colors = [];
    
        for (let i = 0; i < length; i  ) {
            colors.push(pallet[i % (pallet.length - 1)]);
        }
    
        return colors;
    }
var xValues = ['Multimeter', 'UniBox', 'Toby', 'Cables', 'Test'];
var yValues = [2, 100, 223, 84, 197];
var barColors = getColors(xValues.length);

new Chart("myChart", {
  type: "doughnut",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    title: {
      display: true,
      fontColor: 'rgb(255, 0, 0)',
      fontSize:25,
      text: "Products in shortage (by number)"
    }
  }
});
</script>

</body>
</html>

CodePudding user response：

In the options you can add legend font size

    "legend": {
        "display": true,
        "labels": {
            "fontSize": 20,
        }
    },

here in the snippet as well

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>

<canvas id="myChart" style="width:100%;max-width:600px"></canvas>

<script>
    function getColors(length) {
        let pallet = ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"];
        let colors = [];
    
        for (let i = 0; i < length; i  ) {
            colors.push(pallet[i % (pallet.length - 1)]);
        }
    
        return colors;
    }
var xValues = ['Multimeter', 'UniBox', 'Toby', 'Cables', 'Test'];
var yValues = [2, 100, 223, 84, 197];
var barColors = getColors(xValues.length);

new Chart("myChart", {
  type: "doughnut",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },

  options: {
    "legend": {
        "display": true,
        "labels": {
            "fontSize": 20,
        }
    },
    title: {
      display: true,
      fontColor: 'rgb(255, 0, 0)',
      fontSize:25,
      text: "Products in shortage (by number)"
    }
  }
});
</script>

</body>
</html>

CodePudding user response：

@ahmedsunny has shown how to increase the font size.

The size of the donut can be determined by the size of the canvas.

This snippet increases that, setting the width and height. Obviously you'll need to decide exactly what dimensions you want to give it, this snippet is just a demo. (I made it this large so that the small sliver of multimeter is visible).

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<body>

  <canvas id="myChart" width="1000" height="1000" style="width:100%;max-width:1000px"></canvas>

  <script>
    function getColors(length) {
      let pallet = ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"];
      let colors = [];

      for (let i = 0; i < length; i  ) {
        colors.push(pallet[i % (pallet.length - 1)]);
      }

      return colors;
    }
    var xValues = ['Multimeter', 'UniBox', 'Toby', 'Cables', 'Test'];
    var yValues = [2, 100, 223, 84, 197];
    var barColors = getColors(xValues.length);

    new Chart("myChart", {
      type: "doughnut",
      data: {
        labels: xValues,
        datasets: [{
          backgroundColor: barColors,
          data: yValues
        }]
      },

      options: {
        "legend": {
          "display": true,
          "labels": {
            "fontSize": 20,
          }
        },
        title: {
          display: true,
          fontColor: 'rgb(255, 0, 0)',
          fontSize: 25,
          text: "Products in shortage (by number)"
        }
      }
    });
  </script>

</body>

</html>