JavaScript > Fundamentals > Text Template
Suggest an edit to this page

Text Template in JavaScript

How to use D3.js-based text template in Plotly.js.


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

Add Text Template in Pie Chart

To show an arbitrary text in your chart you can use texttemplate, which is a template string used for rendering the information, and will override textinfo.

var data = [{
  type: "pie",
  values: [2, 5, 3, 2.5],
  labels: ["R", "Python", "Java Script", "Matlab"],
  texttemplate: "%{label}: %{value} (%{percent})",
  textposition: "inside"
}];

Plotly.newPlot("myDiv", data)
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var data = [{\n type: \"pie\",\n values: [2, 5, 3, 2.5],\n labels: [\"R\", \"Python\", \"Java Script\", \"Matlab\"],\n texttemplate: \"%{label}: %{value} (%{percent})\",\n textposition: \"inside\"\n}];\n\nPlotly.newPlot(\"myDiv\", data)\n"}">

Customize Text Template

The following example uses textfont to customize the added text.

var data = [{
      type: "scatterternary",
      a: [3, 2, 5],
      b: [2, 5, 2],
      c: [5, 2, 2],
      mode: "markers+text",
      text: ["A", "B", "C"],
      texttemplate: "%{text}<br>(%{a:.2f}, %{b:.2f}, %{c:.2f})",
      textposition: "bottom center",
      textfont:{'family': "Times", 'size': [18, 21, 20], 'color': ["IndianRed", "MediumPurple", "DarkOrange"]}
}];

Plotly.newPlot("myDiv", data)
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var data = [{\n type: \"scatterternary\",\n a: [3, 2, 5],\n b: [2, 5, 2],\n c: [5, 2, 2],\n mode: \"markers+text\",\n text: [\"A\", \"B\", \"C\"],\n texttemplate: \"%{text}<br>(%{a:.2f}, %{b:.2f}, %{c:.2f})\",\n textposition: \"bottom center\",\n textfont:{'family': \"Times\", 'size': [18, 21, 20], 'color': [\"IndianRed\", \"MediumPurple\", \"DarkOrange\"]}\n}];\n\nPlotly.newPlot(\"myDiv\", data)\n"}">

Set Date in Text Template

The following example displays how to show date by setting axis.type in funnel charts.

var data = [{
  type: 'funnel',
  name: 'Montreal',
  orientation: "h",
  y: ["2018-01-01", "2018-07-01", "2019-01-01", "2020-01-01"],
  x: [100, 60, 40, 20],
  textposition: "inside",
  texttemplate: "%{label}"
},{
  type: "funnel",
  name: 'Vancouver',
  orientation: "h",
  y: ["2018-01-01", "2018-07-01", "2019-01-01", "2020-01-01"],
  x: [90, 70, 50, 10],
  textposition: "inside",
  textinfo: "label"}]

var layout = {yaxis: {type: 'date'}}

Plotly.newPlot("myDiv", data, layout)
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var data = [{\n type: 'funnel',\n name: 'Montreal',\n orientation: \"h\",\n y: [\"2018-01-01\", \"2018-07-01\", \"2019-01-01\", \"2020-01-01\"],\n x: [100, 60, 40, 20],\n textposition: \"inside\",\n texttemplate: \"%{label}\"\n},{\n type: \"funnel\",\n name: 'Vancouver',\n orientation: \"h\",\n y: [\"2018-01-01\", \"2018-07-01\", \"2019-01-01\", \"2020-01-01\"],\n x: [90, 70, 50, 10],\n textposition: \"inside\",\n textinfo: \"label\"}]\n\nvar layout = {yaxis: {type: 'date'}}\n\nPlotly.newPlot(\"myDiv\", data, layout)\n"}">