4 Answers, 1 is accepted
Hello, Trey,
The Chart will resize based on its container width by default. This means that even on mobile it should be resized accordingly based on the container that it is placed.
If there is a specific issue, please share some details like the example, code, or at least a screenshot as this will help us better understand the setup.
Regards,
Stefan
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
HI! Thanks for the reply I'll be more specific here.
When I do not assign a specific width and height and even when modifying these dimensions the lower graph clips out some of the text. When I set the specific height and width then I get the full text on desktop but not on mobile.
Rank 1
Hello, Trey,
Thank you for the additional details and images.
Based on the screenshots it seems that the issue is mostly connected to the donut Chart labels. This is connected to the label position and length as an event if we set a large width of the Chart, if the label is long it can still go outside of it.
In these cases, we can recommend choosing from one of the many label positions options that will make the labels more compact or directly render them inside the Chart. Also, we can enable the tooltip for each value, to show more information if the label is long:
https://www.telerik.com/kendo-react-ui/components/charts/api/ChartSeriesItemProps/#toc-labels
https://www.telerik.com/kendo-react-ui/components/charts/api/ChartSeriesLabelsProps/
https://www.telerik.com/kendo-react-ui/components/charts/api/ChartSeriesItemProps/#toc-tooltip
https://www.telerik.com/kendo-react-ui/components/charts/api/ChartSeriesItemTooltipProps/
https://stackblitz.com/edit/react-uqsufd?file=app/main.jsx
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.