Is your Vue.js chart malfunctioning?

I have been experimenting with chart.js and vue.js.

The component I created is called MessageGraph, and it is structured like this (with data extracted from the documentation):

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

<script>
    import Chart from 'chart.js';

    export default {
        created() {
            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(255,99,132,1)',
                            '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: {
                                beginAtZero:true
                            }
                        }]
                    }
                }
            });
        }
    }
</script>

Upon running the code, I encountered this error message in the console:

app.c47f281….js:71222 [Vue warn]: Error in created hook: 
(found in <MessageGraph> at /Users/Janssen/Code/forumv2/resources/assets/js/components/graph/MessageGraph.vue)
warn @ app.c47f281….js:71222
handleError @ app.c47f281….js:72107
callHook @ app.c47f281….js:72939
Vue._init @ app.c47f281….js:74420
...
TypeError: Cannot read property 'length' of null
    at Object.acquireContext (app.c47f281….js:14468)
    at new Chart.Controller (app.c47f281….js:7776)
    at new Chart (app.c47f281….js:10193)
    at VueComponent.created (app.c47f281….js:2106)
    ...

To incorporate the component into my app.js file, I added the following line:

Vue.component('messageGraph', require('./components/graph/MessageGraph.vue'));

In my app.blade file, I included the following snippet:

<message-graph></message-graph>

Can you identify what might be causing this issue?

javascriptlaravelvue.jschart.js

Answer №1

When working with the created() hook in Vue, keep in mind that it is called before your template is attached to the DOM, so interacting with the canvas element at this stage may cause issues.

A better approach is to move your code to the mounted() hook of your component, ensuring that the template has been mounted to the DOM. To further guarantee that the DOM is ready, consider using $vm.nextTick() (see source).

Additionally, for a more Vue-like solution, explore using vue's Child component refs instead of relying on document.getElementById().

Vue.component('message-graph', {

  template: '<canvas ref="chart" width="400" height="400"></canvas>',

  mounted() {
    this.$nextTick(() => {

      let myChart = new Chart(this.$refs.chart, {
        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(255,99,132,1)',
              '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: {
                beginAtZero: true
              }
            }]
          }
        }
      })

    })
  }

})

let vue = new Vue({
  el: '#app',
  template: '<div class="myApp"><message-graph></message-graph></div>'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>

<div id="app"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying a random div using javascript

Seeking a way to display random divs on my webpage, I came across a stackoverflow solution: Showing random divs using Jquery The recommended code can be found here: http://jsfiddle.net/nick_craver/RJMhT/ Despite following the provided instructions, I am ...

javascripthtml

Verify the presence of a specific value within an array of objects in JavaScript that was retrieved from an AJAX response, and then

I am encountering an issue with the code below where I am unable to filter entry.AllLinks. The code snippet is shown here: $.ajax({ url: url, type: "get", headers: {"Accept": "application/json;odata=verbose"}, success: function (data) { ...

javascriptjqueryarraysajax

what are some advanced techniques for manipulating the DOM with a datatable?

I am currently involved in a project where we are presenting the data summary for each year to the user. The summary includes the total data for each year (counted rows). View Data Summary: Click here When the user clicks on the "+" icon, they will be ab ...

javascriptjqueryajaxdomdatatable

Exploring Laravel 5.2: A guide on fetching information from a one-to-one eloquent relationship using the hasOne method

I have two Models: 1. Course. 2. Fee. There seems to be an issue with accessing the fee data for a course in my application. Even though I am able to input the data without any problem, when trying to retrieve it, the fee column appears empty. How can I r ...

phplaraveleloquentlaravel-5one-to-one

Understanding the significance of underscores in JavaScript strings

Some places mention using _() around strings like _('some string'). For instance, in a desktop program with these imports: const Applet = imports.ui.applet; const St = imports.gi.St; const Gdk = imports.gi.Gdk; const Gtk = imports.gi.Gtk; const ...

javascriptlinux

Display the footer once the user has reached the end of the page by scrolling

Below is the footer code I am working with. <div class="row"> <div class="col-md-12"> <div> this section always remains at the bottom </div> </div> <div class="col-md-12"> <div> only v ...

javascripthtmlcsstwitter-bootstrap

JavaScript: abbreviated way to selectively append an element to an array

Currently, I am in the process of creating a Mocha test for a server at my workplace. When dealing with customer information, I receive two potential phone numbers, with at least one being defined. var homePhone = result.homePhone; var altPhone = ...

javascriptnode.js

Is there a way to customize the checkout page using JavaScript?

I'm working on a checkout page where fields need to change based on a selected radio button. There are two options: A and B. When A is selected, I want certain fields to remain visible while others disappear, and vice versa for option B. Although I p ...

javascripthtmlcsswordpressweb

How can I determine the quantity of pairs in an array using JavaScript?

My current approach is not providing me with the desired result. I am facing an issue where pairs of 1 are being counted multiple times, which is incorrect. What I actually need is to count only the "perfect" pairs, such as the pair between 5 and 2 in this ...

javascriptarrays

Is there a way to calculate the total of form field values in Vue.js?

I am currently working on a project that involves calculating the total sum of 5 input fields. I have set up data fields and v-model for each field, and in my computed section I am attempting to calculate the sum. <input type="text" class="form-contro ...

javascriptvue.jsvuejs2

Retrieving information from an array and displaying it dynamically in Next.js

I've been diving into the Next.js framework lately and I've hit a roadblock when it comes to working with dynamic routes and fetching data from an array. Despite following the basics of Next.js, I'm still stuck. What am I looking for? I ne ...

javascriptarraysreactjsfetchnext.js

Navigate through a filtered list of parent items with the use of cursor arrows in AngularJS

My form contains an input with a dropdown, where I display JSON data like this: { "title": "Parent #1", "child" : [ {"title": "Child ##1"}, {"title": "Child ##2"}, {"title": "Child ##3"}, {"title": "Child ##4"} ...

javascripthtmlangularjs

A clever JavaScript function generator encapsulated within an instant function nested within a jQuery ready statement

This code snippet features an immediate function enclosed within a jQuery ready function. $((function(_this) { return function() { document.write('called!'); }; })(this)); I am puzzled by where the resultant function ...

javascriptjqueryclosuresfactory

Guide on sending an image/file from Vue.js to Laravel 7 through axios

I'm experiencing a problem when trying to upload an image file using vue component to a laravel controller. The issue arises when I click the submit button; the phone/address is saved, but the image name does not save. data(){ return{ ...

laravelvue.jsaxios

Using Selenium webdriver to assign a JSON object to a paragraph element

What is the correct way to insert a JSON object into a p tag inside an iframe? I attempted the following approach but it displayed the text "[object Object]" rather than the actual content of the object... This is my implemented code: var arrJSON = [ ...

javascriptjsonselenium

Modifying ID styling using JavaScript on Internet Explorer

I need to change the CSS display property from none to block using JavaScript, but only for Internet Explorer. My current code is not working for the ID #backfill-image. <script> function checkForIE() { var userAgent = navigator.userAgent; ...

javascripthtmlcssinternet-explorerdisplay

Adding an additional parameter in the ListItem onMouseOver function

Within my React code base, I have a material-ui ListItem that looks like this: <ListItem button key={currIndex} onMouseOver={handleOnMouseClickOnListItem}> The handler function in my code (using Flow typing) is as follows: const handleOnMouseClic ...

javascripteventsevent-handlingmaterial-uiflowtype

Converting a JavaScript animation into a video through server-side processing: A step-by-step guide

Attempting to tackle a challenging task but willing to give it a shot: Our team is currently working on developing a website that enables users to generate animations using javascript and html. However, our latest client request involves uploading the cre ...

javascriptjqueryajaxserverside-javascript

Transform the API response from a string into an array containing multiple objects

How can I transform a string API response into an array of objects? When making a GET request, the result is returned as a single long string: const state = { strict: true, airports: [] }; const getters = { allAirports: (state) => state.ai ...

javascriptvue.jssplit

Passing Props in Vue-Router: A Guide

I've encountered an issue with passing props using Vue-Router. I'm struggling to access the props in the next view after routing. Here is my methods object: methods: { submitForm() { let self = this; axios({ method: &apo ...

vue.jsvuejs2vue-componentaxiosvue-router