Click here to Skip to main content
14,486,704 members
Rate this:
Please Sign up or sign in to vote.
hello
i want to draw i pie chart with chartjs.the problem is that the chart is not displayed on my html page and when i inspect and i go to console i have no error. i am not understanding what went wrong.Please does someone have an idea

What I have tried:

<script src="Chart.js-2.9.3/dist/Chart.js"></script>
  <script src="jquery-3.4.1.min.js"></script>
 
</head>
<body>
  <canvas id="myChart" style="width: 400%; height: 400%;"></canvas>
<script>
 $(document).ready(function(){
    var ctx = $("#myChart"). get(0).getContext("2d");
    // pie chart date
    var data = [
        {
            value: 270,
            color: "cornflowerblue",
            highligth: "lightskyblue",
            label: "corn  flover blue"

        },
        {
            value: 50,
            color: "lightgreen",
            highligth: "yellow",
            label: "lightgreen"

        },
        {
            value: 40,
            color: "orange",
            highligth: "darkorange",
            label: "Orange"

        }
    ];
    // draw
            var piechart = new Chart(ctx,{

                type : 'pie',
                data : data
                
            });

 });
        </script>
    </body>
Posted
Updated 3 days ago
v2

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

For a pie chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each.

You also need to specify an array of labels so that tooltips appear correctly.
Your dataset looks nothing like the documentation.
$(function() {
    var ctx = $("#myChart").get(0).getContext("2d");

    var data = {
        datasets: [{
            data: [270, 50, 40],
            backgroundColor: ["cornflowerblue", "lightgreen", "orange"],
            hoverBackgroundColor: ["lightskyblue", "yellow", "darkorange"]
        }],
        labels: ["corn flower blue", "lightgreen", "Orange"]
    };

    var piechart = new Chart(ctx, {
        type: 'pie',
        data: data
    });
});
Demo[^]
   
v2
Comments
   
thanks for the help but justthe labels are displayed and not the chart itself
Richard Deeming 3 days ago
   
Probably because you've set the width and height of your canvas to 400%.

Change them to 100%, as per the demo link in my answer, and the chart will display.
Richard Deeming 3 days ago
   
Or, if you want the chart to be bigger, try:
width:100vw;height:100vh;

Demo[^]
   
THANKS

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100