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 ?

2 Likes
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