How to use Select Dropdown to Update Chart Datasets Chart.js

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!

Interested to learn about how to create charts? Check out below!

⭐ Chart JS Udemy Course ⭐:

Chart JS tutorials for Beginners:

Chart JS tutorials for Intermediate:

Chart JS Dashboard Series:
👍 Most Liked Video Series:

Why did I created these Chart JS video tutorials?
Have you ever used Excel where charts appear almost magically with a click on a button. You notice if you look at a chart or graph you can absorb information within seconds which would take you minutes if it is a table with data.

"A picture is worth a thousand words"

We all know that pictures and colors spark the mind. However, if you try to draw or code a 📊 bar chart or a 📈 line chart, or any type of chart in a Javascript library it is a big challenge. The documentation makes it hard and the it is very hard to work with a canvas tag.

Which was both logical and creative at the same time. And this is why I love charts as well. A chart is the closes to translating logic into visuals. Making the chart interactive is the best way to communicate your message to others.

If we know about this why is coding charts so complicated?

Because computer programming language is based on 100% logic. This is why when you look at Chart.JS, D3.JS, Chartist and other chart libraries in JS you will need to basically explain in logic to a computer what to make visual.

How and where can I help?

My goal and focus is on creating easy to understand Chart.JS videos so you can start using Chart JS in all your website endeavors making Chart.JS a topnotch and leading JS library for the years to come. Just like any programming library once more people use Chart JS it will attract more people to contribute and grow. The videos on Youtube and my complete course on Udemy are here to give a helping hand.

Seeing Chart.JS evolve from Chart.JS 1.0 to Chart.JS 3.0 and with their currently new expansion to Chart.JS 3.0 we can expect more new exciting charts in the near future.

About Chart.JS 3 | Chart JS 3
Chart JS is one of the most use Javascript libraries for the drawing charts. It is designed to create charts in the canvas tag which is great but at the same time slightly challenging for most people. However, knowing how to draw a chart will give you a big edge and most dashboards are consistently adding charts along data tables. Chart JS makes your data more alive and visually more appealing.

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.

#chartjs

[eemamphoenix]

Thank you so much!!
Really helpful, exactly what I need.

[thisboyjason]

Exactly what I needed, and explained very clearly. Thanks very much!

[Seun]

Thank you so much for this! I recently discovered your channel after starting your course on Udemy. These videos are very helpful.

[mejaay]

So useful.. thanks for your effort. you're really great

[techwithonkar]

U literally saved my whole life ❤️❤️. I was getting the error canvas is already in use I think now it will be fixed.

[elarilio]

Thanks so much for this! helped me a lot as it was explained very clearly! I succeeded in doing this for a doughnut chart, but I'm having problems on how am I going to show the labels according to the datasets. Any help is appreciated!
Keep goin' you're helping a lot whose struggling with this stuff. Thanks again!

[nil-xoce]

hi would this also be possible using react and material ui select instead?

[mejaay]

for the same drop down usecase, how can we achieve this for dynamic data getting from API ? like. binding all API as datasets and updating the chart based on dropdown value change

[noelkalel]

do u have video where u can fetch labels based on datasets. for example:

labels: ['red', 'blue', 'green']
data: ['1', '2', '3']

and then when u select smt from dropdown values are changed to:

labels: ['orange', 'gray', 'teal']
data: ['6', '7', '8']

[MrDkstream]

Thanks so much for this tutorial, it was very clear !

I try tu use <?php print json_encode($query) ?> into selection list.

With your tutorial and changes with split('", "') I obtain an array into console.log as ['["1', '2', '3', '4"]']

In my chart I obtain 2, 3 and not 1 and 4, because of [" and "].

I try to escape the [" and "] do you have any idea ?

I hope i was clear...

Thank you !

[elle]

I have been struggling with this for hours. Thank you so much for this video!
I have problems with the label data though. When the page is loaded, it just displays default label and data and not "Week 1" as my option is named and the data connected to it . When a option is selected, the name and data is displayed right. Do you have any ideas to solve this?

[atharvasaney]

Bro can you give me your code please ??
chart.js no longer has this code snippet that you copy pasted

[pramodsawant]

How I do this in php sir please help

In my project drop-down list work with submit button but I want without submit button

[sike]

how to do the same thing data from mysql database?

[bprasannakumari]

Hi this is Prasanna
I have same requirement but how can I do it in angular framework with typescript

[GadgetMeta]

I am working on my project that deals with covid API
when I click on a confirmed cases <div> it show me the only confirmed cases charts and when I click on recovered cases div it show me the chart of recovered cases only.... How can I do that?... Can you make a video on it?

[dominikadaraz]

How could I make sure that the legend has a colour that isnt the same as any of the columns?