3

I'm trying to build a simple bar chart using Chart.js. When I try to view my page, my browser become irresponsive.

The Api version is 40

chartjs version is 2.1.4

  • we are following this to build the chart.

ChartJsApp

 <aura:application >
    <ltng:require scripts="{!$Resource.ChartJs}" afterScriptsLoaded="{!c.scriptsLoaded}"/>
    <canvas aura:id="chart" />
</aura:application>

ChartJsAppController.js

({
    scriptsLoaded: function(cmp, event, helper) {
        var chart = new Chart(cmp.find("chart").getElement().getContext("2d"), {
            "type": "bar",
            "data": {
                "labels": [
                    "January",
                    "February",
                    "March",
                    "April",
                    "May",
                    "June",
                    "July"
                ],
                "datasets": [
                    {
                        "label": "My First Dataset",
                        "data": [
                            65,
                            59,
                            80,
                            81,
                            56,
                            55,
                            40
                        ],
                        "fill": false,
                        "backgroundColor": [
                            "rgba(255, 99, 132, 0.2)",
                            "rgba(255, 159, 64, 0.2)",
                            "rgba(255, 205, 86, 0.2)",
                            "rgba(75, 192, 192, 0.2)",
                            "rgba(54, 162, 235, 0.2)",
                            "rgba(153, 102, 255, 0.2)",
                            "rgba(201, 203, 207, 0.2)"
                        ],
                        "borderColor": [
                            "rgb(255, 99, 132)",
                            "rgb(255, 159, 64)",
                            "rgb(255, 205, 86)",
                            "rgb(75, 192, 192)",
                            "rgb(54, 162, 235)",
                            "rgb(153, 102, 255)",
                            "rgb(201, 203, 207)"
                        ],
                        "borderWidth": 1
                    }
                ]
            },
            "options": {
                "scales": {
                    "yAxes": [
                        {
                            "ticks": {
                                "beginAtZero": true
                            }
                        }
                    ]
                }
            }
        });

    }
})

Note :

i tried lastest version of chartjs and i got same behavior

1

Not sure your browser should become unresponsive though. I tested with the latest version of the library and did not encounter any issues.

enter image description here

above, i just dragged and dropped a component using your exact same code, but with the latest library in a lightning community. did not encounter any issues.

Most likely a browser issue, consider sharing your browser and its version. additionally, check your browser dev tools to see if you get any errors on load (before your browser becomes unresponsive) Try loading with other browsers as well and share your results.

fyi: tested using Google Chrome Version 59.0.3071.115

-1

We faced the same issue right now. we fixed it by changing the API version 40 to 39 :)

-1

Chart.js in Lightning component is working with chrome 58.0.3029.110 version. But not with Chrome 60 version.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.