Help with adding % in datalabels in chart.js

Ask the community
,
1

Hi. Used the example – https://www.wix.com/velo/example/create-a-custom-chart to make html component to gather information from a database and add to the data to create a chart

Information has been gathered well and chart is getting created.

My ONLY issue is that I wanted the labels in the pie chart to resemble percentages instead of numbers. Tried quite a bit to analyse for the datalabels option in chart.js but couldn’t find the right solution.

Anyone here can guide me on this last bit??

Working page code below:

import wixData from 'wix-data';
let colorArray = [];

$w.onReady(() => {
    getvalues("red");
    getvalues("yellow");
    getvalues("blue");
});

// ...

function getvalues(colour) {
    wixData.query("LoginDetails")
        .eq(colour, true)
        .find()
        .then((results) => {
            if (results.items.length > 0) {
                console.log(results.items.length);
                colorArray.push(results.items.length);
                console.log(colorArray);
                makechart(colorArray);

            } else {
                // handle case where no matching items found
            }
        })

        .catch((err) => {
            console.log(err);
        });
}

function makechart(colorArray) {
    console.log(colorArray);
    $w("#html1").postMessage(colorArray);
}

Working html component code below. Have updated the data labels library also but not sure if it works that way?


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> 
  
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.4.0/dist/chartjs-plugin-datalabels.min.js"></script> 
  
</head>

<body onLoad="ready()">
    <canvas id="myChart" width="250" height="200"></canvas>
    <script>
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['Red', 'Yellow', 'Blue'],
                datasets: [{
                    data: [], //start empty
                    backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)'],
                    borderColor: ['rgba(10, 168, 196, 1)', 'rgba(102, 96, 151, 1)', 'rgba(57, 87, 255, 1)'],
                    borderWidth: 1
                }]
            },
            options: {

                scales: {}
            }
        });
     
           window.onmessage = function(event) {
            if (event.data && Array.isArray(event.data)) {
                myChart.data.datasets[0].data = event.data;
                myChart.update();
              
            } else {
                console.log("HTML Code Element received a generic message:");
            }
        };

    </script>
</body>

</html>

Final output below coming . But what I actually need!

1446×1070 51.4 KB

TIA!!!