Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

bencarter78@hotmail.com's avatar

ChartJS not showing with Vue

Hi there

I'm trying just to get a demo chart working in my app but I can't get the chart to display. The canvas element is there but no chart.

// main.js

var Vue = require('vue');
import UserAnalysisChart from "./components/judi/UserAnalysisChart.vue";

new Vue({
    el: 'body',
    components: {
        UserAnalysisChart
    },
});

// UserAnalysisChart.vue
<script>
    import Chart from 'chartjs';

    export default {
        template: '<canvas id="graph" width="400" height="400"></canvas>',
        ready() {
            new Chart(document.getElementById(this.$el), {
                type: 'bar',
                data: {
                    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                    datasets: [{
                        label: '# of Votes',
                        data: [12, 19, 3, 5, 2, 3]
                    }]
                }
            });
        }
    };
</script>

// View

<user-analysis-chart></user-analysis-chart>

I am using bootstrap's panels and nav tabs to display the chart which I have read can sometimes cause an issue, however I have tried adding the code directly to my master blade view and the chart shows just fine.

Can anyone help?

0 likes
1 reply
bencarter78@hotmail.com's avatar

I've just noticed my mistake, i had actually installed ChartJS via

npm install chartjs

It should have been

npm install chart.js

Working now!

1 like

Please or to participate in this conversation.