How to use config and setup in a line chart in Chart JS

How to use config and setup in a line chart in Chart JS

In this video we will explore how to use config and setup in a line chart in chart js. In Chartjs 3 the structure of displaying of a chart is gradually changing. The doumentation has the original method but also the new method of creating blocks usually three blocks in order of importance are: setup block, config block and the render block. We will take in chart js documentation the line chart sample and dissect it to understand what is going on. Once you understand this you can better understand the examples in the chart js documentation. Let's explore!

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

[ivankadagidze]

Can you add the document of your code in the description because when I make a mistake I do not know what mistake I made and it would be helpful to be able to copy paste and check

[fedejek]

useful explanation and very well done video. could you make a video on how to use time scales and how to enter dates and times? thank you very much

[thiyagarajanm]

Your vedio is very helpful for me, kindly put vedio about zoom reset button interface to chartjs with database connections sir

[종일안-lz]

Hello.
I always get a lot of help by watching your videos.
Thank you very much.

I have a question.
I am currently using char.js v3.5.1.

* line chart
What if I have a lot of labels?
1. I want to show 3 years with x label yyyy-MM or yyyy-MM-dd.
I want to input all the data and show only the label every 3 months.

2. I want to show 1 year with x-label yyyy-MM-dd.
I want the x label to show only a specific date.
For example, the 1st of every month.

Is it possible?

[arnabmukherjee]

Also highly recommend and msg to all thr subscribers to go for the chart JS Udemy course.. u will definitely learn a lot.. cheers to the author

[theonewhowas]

whats the damn hurry man, and maybe increase your mouse speed
so you wont be having to pick it up and slamming it like you are