Chart Dynamic sizing in Quarto

[ec-nebi]

In Quarto, when using a small screen, the chart doesn't rescale as well as in a standalone format. My guess is that there's a configuration in Quarto css that prevents the font from becoming too small and hardly legible, but in some cases, it would be great to be able to scale it down. I wasn't sure whether my ‘issue’ is better reported here or directly to Quarto. Also, there is no "overflow" and bar to slide on the right or the left. Here’s an example:

example.qmd

---
title: "reprex"
---

## Quarto

Render with `quarto render example.qmd`

library(echarts4r)
  mtcars |>
  e_charts(qsec) |>
  e_line(mpg) |>
  e_title("My long title plot, whose font doesn’t become too small, still doesn’t look good on a phone screen.")

If you don't use quarto, and play with the standalone version, it works fine (even if illegible)

I tried to figure out which css option to change (for this plot only), but couldn't find the solution. Thanks for the work, great library!

[patrekieta]

This is a known issue / complaint related to Echarts. There are some options available for handling text size using Javascript to adjust the sizes but the actual echarts documentation shows that the text can only accept number values. To get around this you would need a custom JS function to rescale the text or width in a meaningful way. While this isn't too bad when working directly with the JS, it can be a pain to implement in R. See here for an implementation using JS.

Maybe something like this could be a longer term feature request for the package. I may mess around with this in my free time but it would likely be a while until it makes it way into Echarts4r.

Working directly with the basic Echarts, there were really only a couple options I could think of to accomplish this.

1. You can directly add line breaks into your text using "\n" which will force your text into multiple lines. While not a great choice, it does allow you to play around with what might work for your situation.

mtcars |>
  e_charts(qsec) |>
  e_line(mpg) |>
  e_title("My long title plot, whose font doesn't become too small, \nstill doesn't look good on a phone screen.") |>
  e_grid(top = "15%")

2. Echarts does have built in handling for overflowing text. You can access this inside the textStyle for the title. In order for the overflow to work, you will need to set the width of the title's text box which only accepts a pixel value.

mtcars |>
  e_charts(qsec) |>
  e_line(mpg) |>
  e_title("My long title plot, whose font doesn't become too small, still doesn't look good on a phone screen.", 
          textStyle = list(
            overflow = "break",
            width = 200
            )
          )

Neither of these solutions are perfect but it might give you a little more control over the look of the chart.