Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 10, 2023 at 10:28 pm #1407056
    davidkfry

    The aspect ratio of the chart is fixed so on a mobile device like Galaxy S20, the canvas has a fixed height of only 153px. With a larger number of datasets on a bar chart, or if those dataset titles need to be longer, on mobile they wrap to a second line. Between the chart title, dataset titles and X-axis titles, they take up almost all of the space.Then the part that ends up being variable is the height of the Y-axis in the chart itself. So on mobile you can end up with a chart with a Y-axis labeled as 0, with lines or bars that are only a few pixels tall.

    Removing the chart headline helps. Shortening the dataset titles when possible will also help, but it’s still really short on mobile so it is harder to understand the data because there’s so little variation in the height of bars.

    May 11, 2023 at 10:41 pm #1407157
    davidkfry

    Line chart on mobile

    May 12, 2023 at 6:02 am #1407182
    Ismael

    Hi,

    Thank you for the inquiry.

    We would need to inspect the chart element to provide the necessary modifications. Please provide us with the site details in the private field. Have you considered using a different chart for mobile view? You can utilize the builder element’s Advanced > Responsive > Element Visibility settings to toggle the display of the element on different screen sizes and maybe display a different type of chart for smaller screens.

    Best regards,
    Ismael

    May 12, 2023 at 6:59 pm #1407262
    davidkfry
    This reply has been marked as private.
    May 15, 2023 at 3:16 am #1407403
    Ismael

    Hi,

    Thank you for the info.

    You can try this css code to adjust the height of the chart but it might distort the element a bit.

    .avia-chart-container.av-2vujhrt-0855884933b1b8267e5416ea7624b97a canvas.avia-chart {
    min-height: 500px;
}

    Please make sure toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css modification.

    Best regards,
    Ismael

    June 12, 2023 at 7:16 pm #1410376
    davidkfry

    > it might distort the element a bit.

    Yeah, I had already tried to adjust the height. It distorts it a lot.

    I also have a pie chart issue. With 12 labels, the whole pie disappears because of the fixed height of the element.

    June 13, 2023 at 5:06 am #1410414
    Ismael

    Hi,

    Thank you for the update.

    Have you tried adjusting the value of the min-height property? On screens smaller than 767px, the height of the line graph hovers around 200px. Adjusting the min-height value closer to the default height should help.

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .avia-chart-container.av-2vujhrt-0855884933b1b8267e5416ea7624b97a canvas.avia-chart {
    height: 250px !important;
  }
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.