Laravel - Bootstrap Javascript's conflict with Chart.js

user_8348567 0
Viewed 1416

Has anyone experienced this?

Bootstrap's Javascript (For modals, accordion, and other animations) has conflict for my Chart.js.

Here's the cdn link, I used the minified version. (Chart.min.js)

If this helps, I'll show my script for the chart:

<script src="{{ asset('js/Chart.min.js') }}"></script>

<script>
    let myChart = document.getElementById('myChart').getContext('2d');

    let massPopChart = new Chart(myChart, {
        responsive: true,
        type:'line',
        data:{
            labels:['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
            datasets:[{
                label:'Sales',
                data:[
                    500,
                    304,
                    601,
                    670,
                    912,
                    612,
                    500
                ],
                backgroundColor: 'rgba(129, 207, 238, 1)',
                borderWidth: 1,
                borderColor: '#000',
                hoverBorderWidth: 3,
                hoverBorderColor: '#000'
            }]
        },
        options:{
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                    }
                }]
            },

            title:{
                display: true,
                text: 'Weekly Sales',
                fontSize: 25
            },

            legend:{
                position:'bottom',
                display:false,
            },

            layout:{
                padding: 50,
            }
        }
    });
</script>

It's a line chart that has a default value (for testing). The chart disappears after a split second, and because of this. I knew that it was because of the Bootstrap's javascript.

Whenever I take off, or comment out the script tag for the Bootstrap's javascript, the chart shows with no problem at all. But my modal and other animations doesn't work now.

I somehow want both of them to work, because I need them both.

chart.js laravel javascript
3 Answers

This may be the most frustrating (bug/feature/problem) I have ever come accross and got me stuck for a few days, but because my boss doesn't take no for an answer and I hate giving up, I finally managed to solve it. The answer thought me something about html and javascript I never knew:

The answer:

In the <head></head> of your html file you need to change the way bootstrap call's it's app.js from this:

<script src="{{ asset('js/app.js') }}" defer></script>

to this:

<script src="{{ asset('js/app.js') }}"></script>

Note the missing defer tag.

The explanation:

You may be wondering, what does the defer tag do? And to answer that I give you this small snippet: 

<html>

<body>

  <script src="https://www.w3schools.com/tags/demo_defer.js" defer></script>

  <p id="p1">
    Hello World!
  </p>

</body>

</html>

It simply stops the browser from loading/running the script until the site has been completely parsed. In the above example the script we call contains the following code:

alert(document.getElementById("p1").firstChild.nodeValue);

Basically telling your browser to send an alert with the contents of whatever is inside the p tags. Without the defer tag, the script would fail because it would be run before the p tags get parsed by the browser, and javascript can only work with what the browser already parsed.

As far as I found, removing the defer tag doesn't break anything in bootstrap, so I don't know why it even has a defer tag.

I'm also not quite sure why this would be a problem for chart.js, If anyone knows I would love to hear it.

user_58752580

I had the same problem after removing the defer attribute that @TDM talked about. I solved this simply by adding an DOMContentLoaded event listener.

document.addEventListener("DOMContentLoaded", function () {
    new Chart(ctx, {...});
});
user_65977370

had this same problem however removing defer attribute made other elements not to work in my laravel application. So I allowed defer on the app.js script and used the bellow suggested by @jakub to get it loaded after the dom element.

document.addEventListener("DOMContentLoaded", 
    function () {
        new Chart(...);
    }
);
user_152044120
Related