CODEWITHSUNDEEP
javascripthtmlcharts
Solo
Solo

Reputation: 579

Drawing pie chart with chart.js

I'm using chart.js from http://www.chartjs.org/.

I want to draw a pie chart, but nothing is displaying. I managed to draw line chart, so the Javascript is loaded.

HTML

<!-- Chart -->
<script type="text/javascript" src="_javascripts/chart/Chart.min.js"></script>
<!-- //Chart-->


    <canvas id="browsersChart" width="400" height="100"></canvas>
    <script>
    var ctx = document.getElementById("browsersChart");
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            datasets: [{
                label: 'Browsers',
                data: [14, 2, 2, 2, 1],
                backgroundColor: [
                    window.chartColors.red,
                    window.chartColors.orange,
                    window.chartColors.yellow,
                    window.chartColors.green,
                    window.chartColors.blue,
                ],
            }],
            labels: [
                "Chrome"
                "Firefox"
                ""
                "MSIE"
                "Mobile Safari"
                ]
            },
            options: {
                    responsive: true
            }
        };
    </script>

Upvotes: 2

Views: 1286

Answers (1)

Nathan Heffley
Nathan Heffley

Reputation: 610

You have some typos in your code.

In the labels section, you need a comma after each label:

labels: [
    "Chrome", // These commas at the end need added.
    "Firefox",
    "",
    "MSIE",
    "Mobile Safari"
]

You also need to add a ) at the very end of the Chart declaration:

    options: {
        responsive: true
    }
}); // The rounded bracket here needs added

In the future, you should use the dev tools in your browser. The Console tab will tell you about errors like these. It explained exactly what line had errors.

After fixing these typos, I got a pie chart just as expected.

Upvotes: 1

Related Questions