Fixed Y-Axis width

323 views
Skip to first unread message

Tihomir Heidelberg

unread,
Jan 24, 2021, 2:03:39 PM1/24/21
to Chart.js User Discussion
Hi,

I have several charts on page appearing one bellow other. The problem is that charts have different yAxis but show same time period. I want graphs to be aligned, but I couldnt find a way to do that. Ideally we need a way to sepcify width of yAxis (left and right) area width. Any idea how to solve that ? Below is the image.

ChartsJs.PNG
Thanks

juls.di...@gmail.com

unread,
Jan 25, 2021, 2:23:42 AM1/25/21
to Chart.js User Discussion
Hi,
Have you tried to hide the y-axis labels.
Other way to accomplish this is to put all 3 y-axis on one canvas

Regards,
Julian

Tihomir Heidelberg

unread,
Jan 25, 2021, 3:24:04 AM1/25/21
to chartjs-use...@googlegroups.com

Hi Julian,

hidding the y-axis will solve the problem, but I need y-axis.

You mean to create a additional Chart that will contain only y-axis ? Can I hide graph ? If yes that would be doable, I just need to have fixed ranged which I can precompure.

Still, it would be better if we have some property where we will define the fixed or mimumum width of y-axes area, maybe there is such hidden or undocumented member.

BR,
Tihomir

--
You received this message because you are subscribed to a topic in the Google Groups "Chart.js User Discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/chartjs-user-discussion/zqLGtz5hm60/unsubscribe.
To unsubscribe from this group and all its topics, send an email to chartjs-user-disc...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/chartjs-user-discussion/9907349c-b22c-47dd-b31e-f729c6a27a40n%40googlegroups.com.

juls.di...@gmail.com

unread,
Jan 25, 2021, 6:45:36 AM1/25/21
to Chart.js User Discussion
Hi Tihomir, 
Very interesting first name! :) Here in Bulgaria we have it exactly the same one! 

Now on topic...
Can you do some Codepen, or JSFiddle or something like it, so I can play around with, and show you what I mean.
The thing that I propose is these two charts on the pictures to become one, with one x-axis, and 3 y-axis (I see that the second one has already 2 y-axis)

Regards,
Julian

Tihomir Heidelberg

unread,
Jan 25, 2021, 11:11:41 AM1/25/21
to chartjs-use...@googlegroups.com


On 25.1.2021. 12:45, juls.di...@gmail.com wrote:
Hi Tihomir, 
Very interesting first name! :) Here in Bulgaria we have it exactly the same one!

althroug my last name suggests otherwise, I am from Croatia, which means we speak very similar language and we do share names too, South Slavs...

Now on topic...
Can you do some Codepen, or JSFiddle or something like it, so I can play around with, and show you what I mean.
The thing that I propose is these two charts on the pictures to become one, with one x-axis, and 3 y-axis (I see that the second one has already 2 y-axis)

Huh, I plan to have 10+ such graphs one above other, each having 2-3 yaxis. This would get overcomplicated. I will dig into charts source code, if I do not find solution, will open issue as request for feature on chart js github.

Thanks

Rob Mingis

unread,
Jan 26, 2021, 5:15:57 AM1/26/21
to Tihomir Heidelberg, chartjs-use...@googlegroups.com
Hi Tihomir, 

I ran in to similar trouble as you with multiple y-axes.  I didn't have any luck sorting it out with chart.js, as good and simple as it is, so I was forced to switch to D3.js.   Bit of a learning curve, but plenty of examples and once you get the jist, you can do anything with it if you choose to follow up.  Ie, you set your margins allowed for the axes, plot width, chart size, etc. manually.  Maybe you can do the same with Chart.js but I didn't have any luck.  Screenshot of the D3 result below:

image.png



You received this message because you are subscribed to the Google Groups "Chart.js User Discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chartjs-user-disc...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/chartjs-user-discussion/d7307ff6-0829-985b-675e-c62fab55e2bd%40lite.hr.
Reply all
Reply to author
Forward
0 new messages