Make cartesian charts responsive #32824
Conversation
|
|
||
| /** | ||
| * Enables the chart to automatically adjust its size based on the container's dimensions. | ||
| * @default false |
There was a problem hiding this comment.
make default to be true
There was a problem hiding this comment.
It doesn't work well when enableReflow prop is true. The chart gets truncated below min width but scrollbar doesn't appear because svg width is set to 100%.
Will have to disable reflow in all examples. Should I apply this change?
There was a problem hiding this comment.
do you think this is better than enable reflow solution.
There was a problem hiding this comment.
yes, this solution is better if all the overlapping issues are fixed.
There was a problem hiding this comment.
So, here the bars ( in VBC ) or lines (in LineChart) will get overlapped if we decrease chart size beyond a certain limit ?
There was a problem hiding this comment.
For bars, we have already fixed the overlapping issue and lines dont have this issue. Currently, only the x-axis tick labels overlap in smaller viewports.
...-preview/library/src/components/CommonComponents/ResponsiveContainer/ResponsiveContainer.tsx
Outdated
Show resolved
Hide resolved
packages/react-components/react-charts-preview/library/src/components/LineChart/LineChart.tsx
Outdated
Show resolved
Hide resolved
Previous Behavior
Cartesian charts adjust to the container size only when the width and height props are updated or when the component mounts (e.g., on page load).
New Behavior
With the responsive prop set to true, cartesian charts automatically resize in response to changes in the container size.