Mobile friendly chart resize

5 posts, 0 answers
  1. Trey
    Trey avatar
    3 posts
    Member since:
    Jun 2020

    Posted 03 Jun 2020 Link to this post

    I can't quite seem to find anything on this. I have some charts that I'm trying to format better for mobile. Anyone done this and have advice on the best way to resize KendoCharts on mobile?
  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 04 Jun 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Trey
    Trey avatar
    3 posts
    Member since:
    Jun 2020

    Posted 04 Jun 2020 in reply to Stefan Link to this post

    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.

  4. Trey
    Trey avatar
    3 posts
    Member since:
    Jun 2020

    Posted 04 Jun 2020 in reply to Trey Link to this post

    doubled up first screenshot here's the intended second mobile one.
  5. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 08 Jun 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top