echarts: How to use subscript/superscript (or latex/mathjax) in 3D axis labels? Code Answer

How do I render superscript or subscript in a 3D chart?

Right now I’m doing like this:

xAxis3D: { scale: true, gridIndex: 0, name: "f0" },
yAxis3D: { scale: true, gridIndex: 1, name: "f1" },
zAxis3D: { scale: true, girdIndex: 2, name: "f2" },

and the y-axis label in the plot looks like this:

Instead of f2, is there any way I can label it like f₂ (similar to f<sub>2</sub> in html)?

Also, is there any way to use latex or mathjax within echarts?

Answer

As I know Echarts doesn’t have this or similar features. But even if it did, it’s not enough. Need improve the zRender (visualization engine) to support this feature.

I would to recommend for you to capture the values and replace to Unicode symbol in formatter, see example:

var myChart = echarts.init(document.getElementById('main'));
var chars = ['u00BC', 'u00BD', 'u00BE', 'u2150', 'u2151', 'u2152'];
var option = {
  xAxis: [{
    data: [0, 1, 2, 3, 4, 5],
    axisLabel: {
      formatter: (val, idx) => chars[parseInt(val)],
    }
  }],
  yAxis: [{}],
  series: [{
    name: 'Series',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
};

myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

Addition:

• Online Converter LaTeX expression to Unicode
• Ready to use library on npm

P.S. Just for my: have you ever seen JS-charts with embedded Latex?