[Chartjs]-Chart.js pie chart not showing in Google Chrome canvas

by

4👍

✅

Your data structure for version 2.5.0 is completely wrong, it needs to look more like this (if it was working for you in Firefox using the shown data structure then I have no idea why, because it shouldn’t have):

var pieData = {
     labels: ["Purple", "Green", "Orange", "Yellow"],
     datasets: [
         {
             data: [20, 40, 10, 30],
             backgroundColor: [
                  "#878BB6", 
                  "#4ACAB4", 
                  "#FF8153", 
                  "#FFEA88"
             ]  
         }]
};

Notice how it’s no longer an array of objects, but an object containing arrays. Also the direct properties of pieData are labels and datasets and then datasets is split into the values and the background color.

Link to the Pie Chart data structure documentation for reference: Chart JS Documentation

JSFiddle example: https://jsfiddle.net/0vh3xhsw/2/

0👍

var pieData = {
   labels: ["Purple", "Green", "Orange", "Yellow"],
   datasets: [{
     data: [20, 40, 10, 30],
     backgroundColor: [
          "#878BB6", 
          "#4ACAB4", 
          "#FF8153", 
          "#FFEA88"
       ]  
    }]
};

// Get the context of the canvas element we want to select
var ctx = document.getElementById("myData").getContext("2d");
//new Chart(ctx).Pie(pieData);
/* New way to instantiate so that it do not thows Uncaught
 TypeError: (intermediate value).Pie is not a function" */
var myPieChart = new Chart(ctx, {
  type: 'pie',
  data: pieData

});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js" type="text/javascript"></script>
</head>

<body>
  <script>
  </script>

  <h1>Chart.js Sample</h1>
  <canvas id="myData" width="600" height="400"></canvas>
</body>

</html>

Leave a comment