Click here to Skip to main content
15,615,469 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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>
  <canvas id="myChart" style="width: 400%; height: 400%;"></canvas>
    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

Updated 2-Jul-20 20:00pm

1 solution

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
Share this answer
Comments 27-Mar-20 14:06pm    
thanks for the help but justthe labels are displayed and not the chart itself
Richard Deeming 27-Mar-20 14:09pm    
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 27-Mar-20 14:11pm    
Or, if you want the chart to be bigger, try:

Demo[^] 28-Mar-20 4:20am    

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

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900