[Chartjs]-My pie chart (chartJs) does not appear

by

3👍

✅

I think your data structure are use chartJS1, but your CDN is chartJS2.
that’s why you got only error msg. 

var ctx = $("#myChart").get(0).getContext("2d");

var data = {
    labels: [
        "Red",
        "Blue",
        "Yellow"
    ],
    datasets: [
        {
            data: [300, 50, 100],
            backgroundColor: [
                "#FF6384",
                "#4BC0C0",
                "#FFCE56"
            ],
            label: 'My dataset'
        }]
};
var myPieChart = new Chart(ctx,{
    type: 'pie',
    data: data,
});

2👍

Try creating the chart with this structure shown in the docs.

Looks like your structure is a little off based on the docs.
http://www.chartjs.org/docs/#doughnut-pie-chart

var ctx = document.getElementById("myChart").getContext("2d");

// For a pie chart
var myPieChart = new Chart(ctx,{
    type: 'pie',
    data: data,
    options: options
});`

var data = {
    labels: [
        "Red",
        "Blue",
        "Yellow"
    ],
    datasets: [
        {
            data: [300, 50, 100],
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ]
        }]
};

It’s responsive by default, expanding to it’s parents container. You can set a parent container max-width or the canvas itself, which will keep it responsive for smaller screens. 

<style type="text/css">
    #myChart {
        max-width: 400;
    }
</style>

Or if you do not want it responsive at all you could set that option to false.

options: {responsive: false}

Leave a comment