How to Have Multiple Charts in One Page With Chart JS

How to Have Multiple Charts in One Page With Chart JS

To display multiple charts in one page in Chart JS you need to understand how to draw a chart. We are working with canvas ID's which need to be unique. This means creating an unique ID for each chart.

This is a great topic to understand and we will use the chart blocks to combine data in keeping it dry.

▬ Materials/References ▬▬▬▬▬▬▬▬▬▬

To keep the video short we might expect you to know parts. These parts we have explained in other videos. You can find the references here below:

▬ Chartjs Viewers Question Series ▬▬▬▬▬▬▬▬▬▬

▬ Got a Question? Comment! ▬▬▬▬▬▬▬▬▬▬

Got a question or special request about a specific item? Comment below and tell me your question. I will make sure to follow up on you!

▬ Find Me Here ▬▬▬▬▬▬▬▬▬▬

Chart JS tutorials for Beginners:

Chart JS tutorials for Intermediate:

Chart JS Dashboard Series:
👍 Most Liked Video Series:

▬ About Us ▬▬▬▬▬▬▬▬▬▬▬▬

Why we created these #chartjs and #javascript video tutorials?

WHY
Creating charts in javascript is very rewarding but extremely challenging. The Chart JS library made it easier to render charts. However the chart js documentation is hard to understand for many. It requires a lot of different moving parts to work along. The canvas tag, javascript, arrays and Chart JS all need to be combined to draw an eye catching bar chart or line chart.

The videos explains the chart js documentation in a more visual and easy to understand way. You can follow along with the code and quickly grasp how it works. We cover the code in chart js but also what truly happens and why something happens when we write a line of code. This fundamental understanding gives clarity to you as a developer in chartjs. In short it is the Chart JS video documentation.

HOW
We answer questions from YOU (viewers) by creating an answer video that covers the questions YOU have posted in the comment section.

WHAT
Our goal is to help YOU learn how to draw charts in Chart JS by showing you in video format how to do it.

▬ Chart JS 3.4.1 ▬▬▬▬▬▬▬▬▬▬▬▬

Chart JS is a javascript library to draw charts in the canvas tag on your site. Presenting data in a visual manner such as charts is more effective and appealing. All the charts are always coded in the latest Chartjs version which is as of this recording Chart JS 3.4.1.

What type of charts can you make with Chart.JS?
With chart js you can make line chart, bar chart, pie chart, doughnut chart, scatter chart, polar area chart, radar chart, gauge chart and area chart. And with some clever tricks and visual adjustment more can be done.

[subpixel]

Terrific presentation! You cover a lot, in a good way, in the first seven minutes.

[HUSH]

I was having trouble displaying multiple charts on my site which led me to this video. About 10 mins in you mention that 'const' variables can't be the same and I realized that was my problem lol! That is how much of a noob I am right now.

[zhijoe]

Well explained! Thank you very much.
I'm from Taiwan. This video is awesome!

[ShroomMusicChannel]

Another useful video 😍

How to show a loading animation before plotting each chart?

[ch_cactus]

Many thanks for this, very useful information.

[patrickbeltrao]

Olá, queria agradecer muito pelos vídeos, estou aprendendo a programar e venho tendo muita dificuldades ainda mais quando se trata de charts. Mas todas dúvidas que eu tenho encontro nas suas explicações e esta me ajudando muito !!! Agradeço muito e te desejo Muito Sucesso.

[MarcioSedeAl]

Thanks for your explanation. Helped me a lot

[pbdev]

Hi! I was hoping that you would show how to place the different charts in horizontal way, such as we can see them in 0:26. Would you be so kind to show the HTML/CSS required? Thanks! Excellent video 🙂

[rafaelviricio]

Obrigado mais uma vez pelo excelente conteúdo! Não sabia como resolver e ao encontratar esse vídeo pude montar em uma unica página 6 indicadores! Sencacional, obrigado!

[matthiasandreas]

Hello thanks for the video.

Please need some help, by using different data.datasets i get every time an Error -> TypeError: Cannot read properties of undefined (reading 'datasets'), after write values for update chart.

May you have some idea?

[PRINCESTARK-ysbi]

how in chart js select multiple city and show their data ?

[ThemisGR]

Nice video, very helpful. My app has two candlestick charts on the same page. When i start it the first chart loads everything instantly. The second does not display any data. When i click inspect, loads instantly and then runs with no problem. Any ideas how could i fix this?

Very usefull, thanks a lot ! Could you extend this video on making different charts based on timescales and different data ?

[puspharaj]

Your chart is created in the top left corner but in my case with same code, the chart fills the whole webpage. Why is that?

[shoaibgull]

Kindly make one for multiple database charts on one page

[tomaszt]

I wonder why you are using const and copying the same data ibstead of just using var and have an exaple where the data are the same and reused on other chart