passing html to plot.text

Community Help
1

I wanted to customize a little bit some text inside Plot.text using html. I wanted to test to customize one plot from a fork of one of observablehq examples on time series.

In particular, I am interested in putting the below forecast text customized inside the purple box within one of the plot. I tried something there but I did not succeed. I end up with [object HTMLSpanElement] printed. I also tried to

html`${textcolor('below forecast', colors.get('below'))}`

but without success. Is there any way to customize text that is put inside observablehq plots ?

1 Like
2

No, unfortunately it’s not possible to pass HTML to Plot.text. But you can create a custom mark that returns a foreignObject with just any HTML contents. However, it might be a bit difficult to position it relative to the data. I wonder if we should offer a foreignObject mark to make this easier?

A second thing that is too difficult in SVG is to create a text with a box border and background…

3

Thanks for your quick answer ! I am a total newbie on observablehq (and your library helps a lot to start on this platform), I guess I need to improve my skills first before trying something out of the box.

4

Of course, SVG itself provides a number of presentation attributes so you might try:

// text to mark date/time of event
Plot.text(["description"], {
  text: d => d,
  x: d3.isoParse("2021-02-17T07:25Z"),
  y: 20000,
  textAnchor: "start",
  fill: colors.get('below'),
}),

The only time I really feel the need to use HTML text, rather than SVG text, is if I need to word wrap or fit the text in a box. In that case, I’d probably overlay a DIV on top of the SVG and put the text in the DIV.

1 Like
5

Plot.text can do some word wrapping, but it’s not as good as what the browser can do in HTML. Don’t hesitate to ask more questions as you discover the library—it also helps us define our priorities.

1 Like