Search code examples
javascriptchart.jsapex-codevisualforce

ChartJs: Chart not display in VF page

I'm using Chart.Js to draw a scatter chart in VF page but in the preview, the chart is not displayed. Not getting any errors but the chart is not displayed. Below is my VF page code.Appreciate your help

<apex:page showHeader="true" sidebar="false" id="page" docType="html-5.0">
<html>
<head>
    <meta charset="utf-8"/>
    <title>Chart.js demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>
</head>
<body>


    <h1>Chart.js Sample</h1>

    <canvas id="myChart" width="600" height="400"></canvas>
    <script>
        
        var ctx= document.getElementById("myChart").getContext("2d");
    new Chart(ctx, {
        type: 'scatter',
        data: {
            datasets: [{
                label: 'Scatter Dataset',
                backgroundColor: 'green',
                data: [{
                    x: -10,
                    y: 0
                }, {
                    x: 0,
                    y: 10
                }, {
                    x: 10,
                    y: 5
                }]
            }]
        },
        options: {
            scales: {
                x: {
                    type: 'linear',
                    position: 'bottom'
                }
            }
        }
    });
    </script>
</body>       
</html>
</apex:page>
Solution

  • you are using a very old version of chart.js (as a matter of fact, the first ever released).

    You could solve this by replacing:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>

    with

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    Fixed versions can also be found, e.g. here.

    working codepen