LaTeX in JSViz

[Dmitry Surovtsev]

Hi,

I wonderif there are any successful examples of adding a LaTeX content (https://katex.org/docs/autorender.html) to a Spotfire JSViz

Experimenting with KaTeX autorenderI reached the stage that myLaTeX content is correctly parsed by a renderMathInElement(document.body) call that I put at the end of my renderCore() code.However, the formula represented bythe LaTeX string is not rendered in the viz at all. If I removethe LaTeX delimiters (e.g. $$) my text reappears where it belongs.

I don't need my dashboardto interactively display math formulas.However, a LaTeX approach would be the easiest way to solve my challenge to break a long chart label into pieces and wrap them in a box.Is LaTeX technically impossible in JSViz or should I dig further

 

Cheers,

Dmitry

[Dmitry Surovtsev]

I also opened a discussion on the KaTeX discussion board about this.

https://github.com/KaTeX/KaTeX/discussions/2989

Looks like the issue may be on JSViz side since the text element in my HTML div is successfully replaced by therenderMathInElement() call to quite a few nested 's with katex keywords.

[Dmitry Surovtsev]

I am getting closer. KaTeX works neatly in JSViz when there's no SVG involved:

 

So why I can't make it work inside a chart to replace some data label

[Dmitry Surovtsev]

Narrowing down the above problem further. I face the same issue regardless of the chosen LaTeX library, be it KaTeX or MathJax. So it is Spotfire side.

[Dmitry Surovtsev]

Here is the final verdict of Prof.Erik Demaine from MIT posted on the KaTeX discussion board:

 

Oops, looking again at your original screenshot, I see now that you're trying to render a formula that's inside a <text> element of an SVG. That won't work; KaTeX only supports math inside HTML. You might be able to get it to work by wrapping the KaTeX output in an SVG <foreignObject> but this hasn't been tested.

 

It might also be possible with MathJax using its SVG rendering mode, but not without significant additional code.

 

Since most of interactive chart examples in the d3js.org gallery are designed exactly like that (i.e. data points are labelled by <text> elements inside an <svg> group) and since we use BI platforms to avoid excessive coding (especially in such a strange language like JS), I park this issue.

[Dmitry Surovtsev]

For the sake of good order, I posted the solution on KaTeX discussion board but didn't copy it here. It is doable. The LaTeX string needs to be added to SVG as a element rather than as or .