Chart JS에서 수평 막대 그래프를 만드는 방법을 알아보겠습니다. 수평 막대 그래프를 만드는 것은 수직 막대 그래프와 별다른 차이가 없습니다. 본질적으로는 90도 각도로 된 막대 그래프입니다. 이 비디오를 시청하세요:
Chart JS에서 가로 막대 차트
수평 막대 그래프를 만들려면 실제로 어떤 일이 일어나는지를 이해해야 합니다. 우리는 네임스페이스 indexAxis를 사용하여 x축의 값을 y축으로 바꾸고 그 반대도 적용합니다. 이렇게 바꾸면 막대 그래프가 사실상 90도로 회전합니다. y축이 레이블을 가져오고 막대는 값에 따라 왼쪽에서 오른쪽으로 이동합니다.
그러므로 본질적으로는 x와 y 스케일 또는 축이 교환된 막대 그래프입니다. 이것을 알면 Chart JS가 어떻게 작동하는지에 대한 명확한 그림을 그릴 수 있습니다.
2 replies on “Horizontal Bar Chart”
Hi, I’ve been following your videos on youtube for quite some time and I have to say they are quite helpful, thank you. I’m just wondering, is it possible to fix the bar size on a single horizontal stacked bar so long as the difference from i+1 and i is the same? Let’s say we have a dataset of 20 values from 10 to 200, obviously i+1 -i is a difference of 10 for all values. So plotting it on a stacked horizontal bar, I want it to maintain fixed bar size. What’s happening at the moment is the bars start out thinner and eventually increase in size despite being the difference.
Hi James, thank you for your kind words. Regarding to your question if I understand it correctly is as you add more bars the bars are becoming thinner. In essence they have to become narrow due to the fixed size in the canvas.
I’m not sure if you are familiar with how the chart js canvas calculates height and width. But in your case how it is build is working against to what you want to achieve. While might have some idea but not sure if it work. I will make a video about this.
But here is currently my speculation:
1. Disable the maintainAspectRatio settings in Chart JS. This is your core issue working against your desired result.
2. The height of your canvas should have a min height but also a dynamic height based on how many horizontal bars you have. This could be achieves with the JS arrays as we can read the JS objects of Chart JS. That needs to be a height formula that would work once the min-height would be surpassed.
For example: height = each bar * 20px.
I will explore this and once I have the answer post a video about this and notify you as well.