{"id":12,"date":"2022-01-20T21:40:15","date_gmt":"2022-01-20T21:40:15","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/stanleymohr\/?p=12"},"modified":"2022-01-20T21:40:15","modified_gmt":"2022-01-20T21:40:15","slug":"using-chart-js-with-vue-js-v3","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/stanleymohr\/2022\/01\/20\/using-chart-js-with-vue-js-v3\/","title":{"rendered":"Using Chart.js with Vue.js v3"},"content":{"rendered":"\n
Introduction<\/h3>\n\n\n\n
I recently needed a way to integrate a charting utility into a Vue.js project of mine and needed to find a way to do so. I really enjoyed the flexibility of Chart.js, but at this time, there is no integrated implementation of Chart.js into v3 of Vue.js. I experimented with some npm packages with no luck. So it was time to get dirty and fake it until I made it work.<\/p>\n\n\n\n
In this post, I will be showing a quick way to make a Chart.js component that can react to props for re-usability multiple times in your Vue.js projects.<\/p>\n\n\n\n
Prerequisites <\/h3>\n\n\n\n
To complete this tutorial, you will need the following:<\/p>\n\n\n\n
Node.js and NPM package manager installed locally<\/li>
Basic Knowledge of Vue.js components (I recommend using the Vue CLI to create a project)<\/li><\/ul>\n\n\n\n
This tutorial is being prepared with Node v14.17.1, @vue\/cli 4.5.15, npm 8.3.1, and Chart.js 3.7.0.<\/p>\n\n\n\n
Step 1 – Creating Your Vue Project and Install Chart.js<\/h3>\n\n\n\n
Let’s create our project directory using Vue CLI and use default to use Vue 3<\/p>\n\n\n\n
Now, we can install Chart.js into our project using npm package manager.<\/p>\n\n\n\n
npm install chart.js\n<\/code><\/pre>\n\n\n\n
At this point, we have created our vue-chart sample project and installed our Chart.js dependencies. Let’s get to the fun work now!<\/p>\n\n\n\n
Step 2 – Create a Vue Chart Component<\/h3>\n\n\n\n
I will provide our sample data later in this tutorial, but lets immediately get into creating the Vue component that we can import to other components in our Vue application.<\/p>\n\n\n\n
Under your src<\/code> directory, you will have a components<\/code> directory. You might notice it has the default HelloWorld.vue<\/code> file if you used the Vue CLI as before in step 1. In this folder, create the file Chart.vue<\/code>.<\/p>\n\n\n\n
Now, we will want to properly format our component into what Vue likes to see including our template<\/code> and script<\/code> elements. We will also include the canvas<\/code> element with a specific id<\/code> that Chart.js relies on and import it into our component. It is also a good idea to wrap our canvas component into a div for Vue to properly operate. <\/p>\n\n\n\n
At this point, you have created the base Vue component. Now what? Well, we will need to add just a few more lines to allow Chart.js to do its thing and Vue to accept props from parent components.<\/p>\n\n\n\n
Let’s first take care of props, Vue’s way of sending data to child components so we can make this truly reusable.<\/p>\n\n\n\n
chartData<\/code> will be our general prop that we import to provide Chart.js the data it would like to create our graphs. The power of usability!<\/p>\n\n\n\n
Now, our canvas chart element needs that linked to our prop. This is where a lot of functionally breaks down if we do not properly link them. For this, we are going to use vanilla JavaScript and DOM manipulation in conjunction with Vue’s mounted <\/code>lifecycle hook to make sure it is updated when Vue renders our component instance.<\/p>\n\n\n\n
Okay, we just added a lot there. What essentially is happening is during the mounted<\/code> hook of Vue, the chart<\/code> variable now points to our canvas<\/code> element that Chart.js can use. This is all we have to do now for our component. If this is your first time making a Vue component, congrats! You just made your first reusable component in Vue! <\/p>\n\n\n\n
Step 3 – Import Your Chart Component<\/h3>\n\n\n\n
At this point, we want to display our component on our Vue app. You will want to navigate to App.vue <\/code>in the src<\/code> directory. This is your main parent component if you are new to Vue. If you used Vue CLI, you will have a populated page. We do not need any of this. Let’s make some changes to App.vue by removing the “HelloWorld” component, import, and element to make sure we do not have any extraneous items.<\/p>\n\n\n\n
Awesome! You now imported your created Chart.vue<\/code> component to your parent component. Time to give it some data to create a chart now!<\/p>\n\n\n\n
Step 4 – Feed Your Chart Some Data<\/h3>\n\n\n\n
You cannot have a chart without some data, so let’s build an object that we can feed our Chart.vue<\/code> component to digest! <\/p>\n\n\n\n
For Chart.js, when you make a chart object, it requires an internal data object that has arguments that can be populated. In the interest of time, I would recommend going through the Chart.js documentation to learn more, but because we built our Chart.vue<\/code><\/span> component to be reusable, you can change anything! Line graph, bar graph, animated graph, doesn’t matter!<\/p>\n\n\n\n
Now let’s use Vue’s powerful data() property to store objects and return data in conjunction with v-bind to send this chart internal data object through our prop earlier. For our chart data, I am just going to use the provided example on Chart.js<\/a>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5063\/files\/2022\/01\/chartjs-vue-tutorial.png\")
<\/figure>\n\n\n\n