Rank 1
There are two charts: the first one at the top and the second one at the bottom of the page.
I need chart areas to be aligned, for this, it's necessary to set Y-axis to some fixed width.
How this can be achieved?
Thanks!
edit:
Attached example of what should be aligned.
1 Answer, 1 is accepted
Hi Michael,
The two charts can be aligned by making use of one of the following approaches:
1) setting the width prop of the ChartArea of both Charts to be equal:
https://www.telerik.com/kendo-react-ui/components/charts/api/ChartAreaProps/#toc-width
2) using Chart Panes: https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/panes/
Additionally, you can also keep track of the following functionality which will be very useful in this case:
https://github.com/telerik/kendo-react/issues/929
Hope one of the approaches above is suitable for your application.
Regards,
Krissy
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
1) settings __width__ changes whole width actual chart areas still have different sizes;
2) Chart Panes is exactly what I need but it works only with categorical axis; currently I have X/Y axis and 'scatter line' series
Is there other way to align charts? Is it possible to set some fixed size for labels?
(there is an attached screenshot now of axis with different sizes)
Hello, Michael,
In this case, I can suggest checking the format or the content props of the XAxis labels. These props can allow setting a format or template that will return all labels with a similar length will align them better:
https://www.telerik.com/kendo-react-ui/components/charts/api/ChartYAxisLabelsProps/#toc-format
https://www.telerik.com/kendo-react-ui/components/charts/api/ChartYAxisLabelsProps/#toc-format