How to Add Chart.js Charts to a Vue 3 Project

In Web Development

How to Add Chart.js Charts to a Vue 3 Project - read the full article about Vue Js update, Web Development and from Yasmin Zulfati Yusrina on Qualified.One

Share

Tweet

Yasmin Zulfati Yusrina
Youtube Blogger

Start a Vue 3 project with Vite.

Install Chart.js and vue-chart-3.

Ill add some links to CSS here.

Ill import the chart components and add some styling in App.vue.

Ill create the components now.

For bar chart we use BarChart.

Import it from vue-chart-3.

We need to pass chartData.

Ill pass the data, options, and CSS class.

Before adding this, Ill create a JS file to import things we will use across charts.

Things like legend, title, and tooltip.

Register them.

Import the file in main.js.

Now Ill add the data.

Import ref.

We can add the data like this.

For the options Ill just pass a title.

Oh, I forgot to import computed.

Now, start importing and registering what the console tells us.

First, BarController.

Dont forget to register it.

Next is CategoryScale, LinearScale, BarElement.

OK, first chart down.

Wait, wheres the title? Its not displayed by default.

OK, we get the title.

Next is the doughnut chart.

First, we need DoughnutController, and then the ArcElement.

There you go.

Last chart.

LineController, PointElement, LineElement.

There you go.

Remember the class earlier? chart-container? Now, what if I comment on the bar chart? We get errors.

We didnt get an error message earlier because the line chart uses the scales I use in the bar chart.

Ill add some more changes to the JS file.

We can change a lot.

The colors, fonts, padding.

To save time Ill just copy my notes here.

OK, we get 3 charts, but theyre not patterned like the thumbnail (yet).

For that, we need patternomaly.

Install then import it in the components.

Ill use the dash and dot patterns.

There you go.

For this one Ill let patternomaly generate the patterns.

Oh, I forgot to import it again.