I was having trouble with the chart stretching infinitely and have been desperately trying to fix it for the past day or so. Didn't realize the answer it's just chucking it inside a div to stop it from happening. Thank you so much, your videos have been really helpful.
Thank you. Happy to hear it was useful. Chart.js is quite tricky with the size as the default tend to overrule any hight and width settings. And the infinite expanding chart is a notorious issue.
You rock it. The way you break down the problem logically is outstanding. Thanks for your efforts. I just have a question, is this method makes the charts responsive I mean if we make the height and width in % , vh/vw, em or rem could it be responsive to the size of the screen or there is another method should be used like media Queries to achieve responsiveness?
Hi Lee Jay, thank you for your kind words. I'm glad it was clear and helpful. By default the chart is responsive. By removing the aspect ratio you will remove the 2:1 ratio which results in a ratio based on the div. The div keeps the chart in place. As sometimes the chart will keep on scaling if there is no div-tags in place. Let's assume you want you keep the chart 100%. What you can do is just keep the default settings and only add a div and assign a width to the div of 100%. ChartJS will read the width and calculate the max width and the matching height. So in that case you do not need to do much. 80% of the time you can use the Chart JS default settings as it is set as most common use cases.
@@ChartJS-tutorials Thanks for your respond. I'm aware of all you mentioned above and I actually did it. Let me tell you what is the issue. I have 4 toggle Tabs and inside each tab there are 2 line-charts with 50% width each. The problem is the when the screen start to become smaller(roughly at 900px), the chart start to lose its width and collapse even the information inside the chart kinda disappear. I just need to take 50% of the width no matter how smaller the screen get.
@@leejay4850 thank you for your clarification. I made a video and I'm not sure but suspect this is your issue. Watch it here: ruclips.net/video/MjuSXP89cwI/видео.html I show here how to solve collapsed charts once the screen size in width is being reduced. You will need to combine css and Chart JS settings along each other to optimize the display of have 2 charts showing side by side properly. Just check and let me know if this is the solution to your matter.
any tips on how to have a dynamic height? for example, i have a horizontal bar chart, and some scenarios, there are many datapoints, so the labels are very compressed on y-axis. is there anyway to let the div height expand dynamically?
Hi iicyAF, thank you for your question. I have created a video covering this specific answer here: ruclips.net/video/olxjiwpg6Tg/видео.html This will show you exactly how to increase the size of the chart as you add more bars to the chart.
Hi, thank you for creating an amazing tool! I am trying to resize the canvas wrapping it into a relative div with dims, but anyway chart is not rendering. although a chart appears when changing dims of the wrapper in dev tools ...
Hi Pramod, thank you for your question. I have multiple videos which you need to watch as it requires multiple steps. For basic watch this videos series: ruclips.net/p/PLc1g3vwxhg1W4bPr3UrM_7xfzJr1O08cZ If you desire more advanced soft coded style. Follow the videos below: 0. Watch the video series: ruclips.net/p/PLc1g3vwxhg1W4bPr3UrM_7xfzJr1O08cZ 1. Placing datalabels to the top: ruclips.net/video/zh-ec7GTJiI/видео.html 2. Placing custom datalabels values / text to the top with Data structures: ruclips.net/video/SkcPNH7Y0sM/видео.html 3. Understanding data structures (to understand what why we use them in Video 2): ruclips.net/video/I05NDa5COJM/видео.html
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
Your channel is a boon, man. Thanks a lot for helping out people like this. I am able to perform greatly in office because of you.
I was having trouble with the chart stretching infinitely and have been desperately trying to fix it for the past day or so. Didn't realize the answer it's just chucking it inside a div to stop it from happening. Thank you so much, your videos have been really helpful.
how to center the chart in the div, i used bootstrap
Thank you. Happy to hear it was useful. Chart.js is quite tricky with the size as the default tend to overrule any hight and width settings. And the infinite expanding chart is a notorious issue.
Place the chart in div. You need to understand flexbox but use this code.
@@ChartJS-tutorials thank you!!
Thanks!!! You helped me a lot! I was having a hard time trying to change the height but I found your video! Keep up the good work! I loved it!
Thank you for your kind words. I'm glad it helped!
thank you very much!! it really solved my problem
hahaha 0:36 the transition is the best ;D
You are a True Life Saver
Keep it up!
Good job man, it's working in my Next app
you are so under rated man....keep it up....
Thank you for your kind words! I appreciate it a lot. :)
Thank you so much!!! I love u!!!!
Glad it helped!
Hello, can you tell me how to adjust the spacing between columns
do you have a video that shows how to move the chart to a different position like "center of page to the right" instead of default location?
You rock it. The way you break down the problem logically is outstanding. Thanks for your efforts.
I just have a question, is this method makes the charts responsive I mean if we make the height and width in % , vh/vw, em or rem could it be responsive to the size of the screen or there is another method should be used like media Queries to achieve responsiveness?
Hi Lee Jay, thank you for your kind words. I'm glad it was clear and helpful.
By default the chart is responsive. By removing the aspect ratio you will remove the 2:1 ratio which results in a ratio based on the div.
The div keeps the chart in place. As sometimes the chart will keep on scaling if there is no div-tags in place.
Let's assume you want you keep the chart 100%. What you can do is just keep the default settings and only add a div and assign a width to the div of 100%. ChartJS will read the width and calculate the max width and the matching height. So in that case you do not need to do much.
80% of the time you can use the Chart JS default settings as it is set as most common use cases.
@@ChartJS-tutorials Thanks for your respond. I'm aware of all you mentioned above and I actually did it. Let me tell you what is the issue. I have 4 toggle Tabs and inside each tab there are 2 line-charts with 50% width each. The problem is the when the screen start to become smaller(roughly at 900px), the chart start to lose its width and collapse even the information inside the chart kinda disappear. I just need to take 50% of the width no matter how smaller the screen get.
@@leejay4850 thank you for your clarification. I made a video and I'm not sure but suspect this is your issue. Watch it here: ruclips.net/video/MjuSXP89cwI/видео.html
I show here how to solve collapsed charts once the screen size in width is being reduced. You will need to combine css and Chart JS settings along each other to optimize the display of have 2 charts showing side by side properly. Just check and let me know if this is the solution to your matter.
I have multiple charts on my page. I want to add a maximize option on each chart. How to do it ?
Hey! I have a question like when we resize the window the tooltip is not working as expected on the bar chart... do u have any solution to this?
Thanks!!! 💪
How to make chart responsive according the required size .,..basically how to make this dynamically possible??
any tips on how to have a dynamic height? for example, i have a horizontal bar chart, and some scenarios, there are many datapoints, so the labels are very compressed on y-axis. is there anyway to let the div height expand dynamically?
Hi iicyAF, thank you for your question. I have created a video covering this specific answer here: ruclips.net/video/olxjiwpg6Tg/видео.html
This will show you exactly how to increase the size of the chart as you add more bars to the chart.
Hi, thank you for creating an amazing tool! I am trying to resize the canvas wrapping it into a relative div with dims, but anyway chart is not rendering. although a chart appears when changing dims of the wrapper in dev tools ...
Can I add status like complete or incomplete on top of chart bar
Hi Pramod, thank you for your question. I have multiple videos which you need to watch as it requires multiple steps.
For basic watch this videos series: ruclips.net/p/PLc1g3vwxhg1W4bPr3UrM_7xfzJr1O08cZ
If you desire more advanced soft coded style. Follow the videos below:
0. Watch the video series: ruclips.net/p/PLc1g3vwxhg1W4bPr3UrM_7xfzJr1O08cZ
1. Placing datalabels to the top: ruclips.net/video/zh-ec7GTJiI/видео.html
2. Placing custom datalabels values / text to the top with Data structures: ruclips.net/video/SkcPNH7Y0sM/видео.html
3. Understanding data structures (to understand what why we use them in Video 2): ruclips.net/video/I05NDa5COJM/видео.html
thanks broo
thank u
how adjust the bar width in chart.js
Hi Apitude, thank you for your question. This video will answer your question: ruclips.net/video/I1kwfQWGMnA/видео.html
there is no refresh on resize browser he not update
Thanks