Axis title images/latex in C# Plotly.NET [Solved]

Plotly R, MATLAB, Julia, Net
1

I’m using Plotly.NET through C#. (Edit you can skip to the solution and further questions)

My goal is simply to include latex compiled images as axis titles. This is a very common need for plotting in data analysis or scientific regimes. I found CSharpMath, which does the latex compiling very easily, and using a skiasharp canvas and a couple of lines of manipulation, have a routine to generate the html-wrapped base64 image string from text input.

I thought that would be the hard part, but I can’t very easily or correctly position them at the axis titles. It seems axis Title won’t take html/images. Annotations seem the same. LayoutImage seems to be the best bet, but as far as I can tell I get data-coordinates, which isn’t right, or “paper” coordinates. Paper can work, but the SizeX/SizeY options are integer only, and 1 seems to already resize the image to the size of the full plotly page (for a single plot at least). This can still work, but now it means I need separately prepare an image of the full size of the layout with my axis title images placed within that already. This is possible but it just seems like it’s maybe less work (but probably for someone else I’ll admit, especially since I don’t know F#) and more correct to get LinearAxis.TitleImage as thing. My method can’t adapt to any layout changes that may or already do exist that would change where the Title should be. I think legends are already an example of one probably, and I suspect grid layouts possible.

My particular hope was to use this in general-purpose data plotting, so some hard-coded, works-for-one-situation hack isn’t ideal. Of course C# is the wrong ecosystem for the job, and it seems probably plotly in python has at least latex support, if not images in general. But C# is just a great language, and I was just trying to find something that can generate nice plots. Plotly in particular is nice because it doesn’t require setting up an application framework, and the shareable interactive html output is nice of course. But Scottplot also doesn’t have latex/image axis titles I think, and quick search doesn’t bring up anything for oxyplot either.

Of course I may be missing an existing option too, so all thoughts are welcome.

2

So, it seems like .withMathTex combined with MathJax might be a solution? Is it possible to embed the needed .js into the html easily (goal is to be able to share a singe flie)? I’m ignorant in html things.

Edit. It seems I found my own answer. Installing MathJax (8.19.1 for me) where the C# is run and using for example

Chart2D.Chart.Line<...>(...).WithMathTex(true);

Does produce latex, apparently in any text element, and the html files alone seem to be all that is needed to share/render the result as far as I can tell! I guess somehow I originally thought this was only for plotly.js, maybe based on older information.

3

I marked it solved too soon. I still have the issue that this:

       var yAxis = LinearAxis.init<IConvertible,IConvertible,IConvertible,IConvertible,IConvertible,IConvertible,IConvertible,IConvertible>(
            Title: Title.init(@"$ \rm O_2$ Concentration [\%]"),
            ...

Only shows the O_2, whereas this:

       var yAxis = LinearAxis.init<IConvertible,IConvertible,IConvertible,IConvertible,IConvertible,IConvertible,IConvertible,IConvertible>(
            Title: Title.init(@"\( \rm O_2\) Concentration [\%]"),
            ...

Only displays “Concentration.” I played with removing the \rm and a couple of things like \text{}, but the only thing that works is to put the whole text between $…$'s and use formatting and ~ to fake text. Is this intended behavior and/or I’m missing something (probably)?

Thanks in advance for clues.

4

It’s hard to find a lot on it, but it seems this is expected behavior. It’s either “$…$” or no dollars. \text{} between the dollars works.