LaTeX in JavaScript

How to add LaTeX to javascript D3.js-based graphs.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

LaTeX Typesetting

// remember to load MathJax.js?config=TeX-MML-AM_CHTML
var trace1 = {
  x: [1, 2, 3, 4],
  y: [1, 4, 9, 16],
  name: '$\\alpha_{1c} = 352 \\pm 11 \\text{ km s}^{-1}$',
  type: 'scatter'
};
var trace2 = {
  x: [1, 2, 3, 4],
  y: [0.5, 2, 4.5, 8],
  name: '$\\beta_{1c} = 25 \\pm 11 \\text{ km s}^{-1}$',
  type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
  xaxis: {
    title: {
      text: '$\\sqrt{(n_\\text{c}(t|{T_\\text{early}}))}$'
    }
  },
  yaxis: {
    title: {
      text: '$d, r \\text{ (solar radius)}$'
    }
  }
};
Plotly.newPlot('myDiv', data, layout);

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"// remember to load MathJax.js?config=TeX-MML-AM_CHTML\nvar trace1 = {\n x: [1, 2, 3, 4],\n y: [1, 4, 9, 16],\n name: '$\\\\alpha_{1c} = 352 \\\\pm 11 \\\\text{ km s}^{-1}$',\n type: 'scatter'\n};\nvar trace2 = {\n x: [1, 2, 3, 4],\n y: [0.5, 2, 4.5, 8],\n name: '$\\\\beta_{1c} = 25 \\\\pm 11 \\\\text{ km s}^{-1}$',\n type: 'scatter'\n};\nvar data = [trace1, trace2];\nvar layout = {\n xaxis: {\n title: {\n text: '$\\\\sqrt{(n_\\\\text{c}(t|{T_\\\\text{early}}))}$'\n }\n },\n yaxis: {\n title: {\n text: '$d, r \\\\text{ (solar radius)}$'\n }\n }\n};\nPlotly.newPlot('myDiv', data, layout);\n"}">