How to Create Stacked Bar Chart with Line Chart in Chart JS

How to Create Stacked Bar Chart with Line Chart in Chart JS

In this video we will explore how to create stacked bar chart with line chart in chart js. Creating a combo chart with a bar and line chart is possible. However once you work with a stacked bar chart you need to do some tiny adjustments. Luckily it is still quite easy to do.

Let's explore this right now!

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

▬ 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:

▬ 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.6.2 ▬▬▬▬▬▬▬▬▬▬▬▬

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.6.2.

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.

[glennrager]

Another helpful video. Very easy to understand. Thanks!

[RicardoChiavelli]

Thanks for this video.
Is that possible to add a line to an stacked bar chart using a second y axis, with a dataset not related with the bar dataset?

[ryomaizen]

how can we have the line if we only have one bar?

[Left_X_Four_X_Dead]

Do not work with two lines, when i add another line the two bars do not get the Full the value.
For example: One bar with 6 value and the another with 2 in the y axis the value sticks in 6 .

[jhonkyledomanais]

hi can I ask you something? can you please make a vid that when you add a data from crud the chart will add/update also. I hope you will read my comment thanks

[jonathanoeijoeng]

thanks, this is very helpful for me. Is it possible if line chart use second axis? I added y2 in config scales with position right and it can show second axis with correct scale but the line chart still use left scales. I want line chart use second axis since it has different scale. Please help. Thank you

[madhamaishwarya]

it is possible to convert a bar chart into stacked bar chart?

[meganfl]

Please can you create a video on using a radio button to change chart colours? With one radio button being for one set of colours and the other being for a different set of colours

[SANIYASHAIKH-fmjt]

When I write stacked=true my chart is disabled what is wrong with this?