Level 14
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
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
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?
Please or to participate in this conversation.