Using Charts.js with Bootstrap Studio

I'm attempting to use Charts.js with Bootstrap Studio 4.0.whateverTheLatestVersionIs.

I'm importing the Charts.js code into BS via "Link External JavaScript"

I'm creating a canvas tag inside of a div, as follows:

<canvas id="myChart" width="400" height="400"></canvas>

To eliminate typos, etc., I'm cutting and pasting demo code from Charts.js into a demo project, as follows.

I attempted to drop a script tag in right below the canvas, as follows:

    var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            borderColor: [
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            borderWidth: 1
    options: {
        scales: {
            yAxes: [{
                ticks: {

The canvas is allocated to the height and width I've specified, but the chart won't ****ing draw. I've also tried putting the chart code in a scripts.js file. I've tried using var ctx = $(#myChart) instead of getElementById.

I've tried fiddling with the order of the scripts. What am I screwing up and how do I fix it so I can render a chart?

  • but the chart won’t ****ing draw.
  • how do I fix it so I can render a chart?

Are you trying to preview the result in a browser or directly in BootStrap Studio?

BootStrap Studio sadly does not render Javascript inside the app, you have to preview it in a browser.

In case that is the issue you are having.

Resolved: I copied the link from the demo code and the version was outdated. As of 2/3/18, the most recent version is 2.7. I copied the most recent link from CDNJS and used that version without issue.

Thanks, BBS_User. I got it squared away. I was using the Preview link in the upper right corner to display a page in the browser, not within the app. Turns out it was a version issue with the demo code. Also, better to put the drawing code in a scripts.js file that gets loaded after jQuery, Chart.js, etc.

You're welcome. Good job resolving your issue and posting the fix.