[Chartjs]-ChartJS does not display when using local Chart.js file

by

3👍

You better use the latest syntax for creating your chart, instead of old one.

also, this is the correct directory where chart.js file resides, when installed through npm :

./node_modules/chart.js/dist/Chart.min.js

Here is the full code that works perfectly on Chrome, Firefox and Safari :

<html>

<head>
    <meta charset="utf-8" />
    <title>Chart.js demo</title>
    <script src="./node_modules/chart.js/dist/Chart.min.js"></script>
</head>

<body>
    <h1>Chart.js Sample</h1>
    <div class="chart-container" style="width: 600px; height: 400px">
        <canvas id="countries"></canvas>
    </div>

    <script>
        var pieData = {
            datasets: [{
                data: [20, 40, 10, 30],
                backgroundColor: ["#878BB6", "#4ACAB4", "#FF8153", "#FFEA88"]
            }]
        };

        // Get the context of the canvas element we want to select
        var countries = document.getElementById("countries").getContext("2d");
        new Chart(countries, {
            type: 'pie',
            data: pieData
        });
    </script>
</body>

</html>

0👍

I think the problem must be the improper closing of the script tag. See below.

Before:

 <script src="Chart.min.js" </script>

After:

 <script src="Chart.min.js"></script>

Here is a demo with a local Chart.min.js File for your reference!

JSFiddle Demo

Leave a comment