I'm trying to use chart.js on a wordpress site. I can get the simple bar chart to work from the documentation, but nothing else. I can't get a pie or doughnut or line or radar chart to render... even if I'm just copying code from JSFiddle straight to my page.

Please see this page: /

There should be a pie chart and then a bar chart. The bar chart works but the pie chart canvas is blank. What's going on?

I'm trying to use chart.js on a wordpress site. I can get the simple bar chart to work from the documentation, but nothing else. I can't get a pie or doughnut or line or radar chart to render... even if I'm just copying code from JSFiddle straight to my page.

Please see this page: http://www.sledgeweb./2016/05/27/chart-test/

There should be a pie chart and then a bar chart. The bar chart works but the pie chart canvas is blank. What's going on?

• javascript
• wordpress
• charts
• chart.js

• If you hit F12 and look at the console, you'll see that chart.js is not being included. – ak_ Commented May 27, 2016 at 15:49
• Is there something wrong with the chart.js link at the top (in head section)? I am linking it offsite. But, I was confused because the bar chart does appear... which I'm not sure it could do without chart.js being included? – sledgeweb Commented May 27, 2016 at 18:15
• It seems like the issue is the way you're including chart.js from github. See this SO post. It would be better to host your own copy of chart.js on your server. – ak_ Commented May 27, 2016 at 18:33
• I'm not sure why the bar chart would load in that case? Regardless, I'm now loading the js from my own server and it looks exactly the same? – sledgeweb Commented May 27, 2016 at 19:05
• The bar chart was not loading in chrome because of the way you'd included the github chart.js. The problem with your pie chart is shown in the browser console. – ak_ Commented May 27, 2016 at 19:43

3 Answers 3

The reason may be that you are using the latest chart.min.js but using the old code. For correct reference, follow the chartjs documentation.

The code configuration structure has changed in the latest release. (I guess from 2.3 onwards)

So, instead of

var countries= document.getElementById("countries").getContext("2d");
var chart = new Chart(countries).Pie(pieData,pieOptions);

We are structuring like:

var countries= document.getElementById("countries").getContext("2d");
var chart = new Chart(countries,{
  type: 'pie',
  data: 
  {
    labels: ['India', 'Germany', 'Netherland'],
    datasets: 
        [{
        backgroundColor: '#337ab7',
        data: ['100', '99' ,'98'],
        borderWidth:1,
        }]
  },
  options:
  {
      responsive: true,
      maintainAspectRatio:false,
      legend: {
        display: false,
        position: 'top'
      }
  }
});

or

var countries= document.getElementById("countries").getContext("2d");
var pieData = 
{
    labels: ['India', 'Germany', 'Netherland'],
    datasets: [{
      backgroundColor: '#337ab7',
      data: ['100', '99' ,'98'],
      borderWidth:1,
      }]
};
var pieOptions = 
{
    responsive: true,
    maintainAspectRatio:false,
    legend: {
      display: false,
      position: 'top'
    }
};

var chart = new Chart(countries,{    
type: 'pie',
data: pieData,
options: pieOptions
});

The problem is your <script> tag is pointing to GitHub's raw text file of the code. Because these files are "raw" they are sent from the server with the header Content-Type:text/plain; charset=utf-8 and X-Content-Type-Options:nosniff (see this question) which tells the client-side browser that these are text files and they were not meant to be executable. Certain browsers, such as Chrome, will therefore choke and not allow the JavaScript to be executed. If you change your <script> tag's src URL for ChartJS to point to a CDN or somewhere that doesn't send those headers it should work correctly.

You've got errors with your JavaScript, you can see them in the console by pressing F12 They are:

Uncaught TypeError: (intermediate value).Pie is not a function(anonymous function)

Uncaught TypeError: $(...).live is not a function

Based on that, and investigating those lines of code, your chart data and call do not match whats in the chart.js docs. You can get it working by following the format used in the developer docs. Something like this should work:

var pieData = {
    datasets: [{
        data: [
            25,
            10,
            30,
            35
        ],
        backgroundColor: [
            "#811BD6",
            "#9CBABA",
            "#D18177",
            "#6AE128"
        ],
        label: 'My Skills' // for legend
    }],
    labels: [
        "Java",
        "Scala",
        "PHP",
        "HTML"
    ]
};


var context = document.getElementById('skills');
var myPieChart = new Chart(context,{
    type: 'pie',
    data: pieData
});

Hope that helps!