javascriptecharts

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

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:

enter image description here

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?

Solution

  • 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:

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