Text and Annotations in Nodejs

How to add text labels and annotations to plots in nodejs.

Adding Text to Data in Line and Scatter Plots

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

require('plotly')(username, api_key);

var trace1 = {
  x: [0, 1, 2],
  y: [1, 1, 1],
  mode: "lines+markers+text",
  name: "Lines, Markers and Text",
  text: ["Text A", "Text B", "Text C"],
  textposition: "top",
  type: "scatter"
};
var trace2 = {
  x: [0, 1, 2],
  y: [2, 2, 2],
  mode: "markers+text",
  name: "Markers and Text",
  text: ["Text D", "Text E", "Text F"],
  textposition: "bottom",
  type: "scatter"
};
var trace3 = {
  x: [0, 1, 2],
  y: [3, 3, 3],
  mode: "lines+text",
  name: "Lines and Text",
  text: ["Text G", "Text H", "Text I"],
  textposition: "bottom",
  type: "scatter"
};
var data = [trace1, trace2, trace3];
var layout = {showlegend: false};
var graphOptions = {layout: layout, filename: "text-chart-basic", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Adding Hover Text to Data in Line and Scatter Plots

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

require('plotly')(username, api_key);

var data = [
  {
    x: [0, 1, 2],
    y: [1, 3, 2],
    mode: "markers",
    text: ["Text A", "Text B", "Text C"],
    type: "scatter"
  }
];
var layout = {title: "Hover over the points to see the text"};
var graphOptions = {layout: layout, filename: "hover-chart-basic", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Simple Annotation

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

require('plotly')(username, api_key);

var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 3, 2, 4, 3, 4, 6, 5],
  type: "scatter"
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 4, 5, 1, 2, 2, 3, 4, 2],
  type: "scatter"
};
var data = [trace1, trace2];
var layout = {
  showlegend: false,
  annotations: [
    {
      x: 2,
      y: 5,
      xref: "x",
      yref: "y",
      text: "Annotation Text",
      showarrow: true,
      arrowhead: 7,
      ax: 0,
      ay: -40
    }
  ]
};
var graphOptions = {layout: layout, filename: "simple-annotation", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Multiple Annotations

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

require('plotly')(username, api_key);

var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 3, 2, 4, 3, 4, 6, 5],
  type: "scatter"
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 4, 5, 1, 2, 2, 3, 4, 2],
  type: "scatter"
};
var data = [trace1, trace2];
var layout = {
  showlegend: false,
  annotations: [
    {
      x: 2,
      y: 5,
      xref: "x",
      yref: "y",
      text: "Annotation Text",
      showarrow: true,
      arrowhead: 7,
      ax: 0,
      ay: -40
    },
    {
      x: 4,
      y: 4,
      xref: "x",
      yref: "y",
      text: "Annotation Text 2",
      showarrow: true,
      arrowhead: 7,
      ax: 0,
      ay: -40
    }
  ]
};
var graphOptions = {layout: layout, filename: "multiple-annotation", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Custom Text Color and Styling

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

require('plotly')(username, api_key);

var trace1 = {
  x: [0, 1, 2],
  y: [1, 1, 1],
  mode: "lines+markers+text",
  name: "Lines, Markers and Text",
  text: ["Text A", "Text B", "Text C"],
  textposition: "top right",
  textfont: {
    family: "sans serif",
    size: 18,
    color: "#1f77b4"
  },
  type: "scatter"
};
var trace2 = {
  x: [0, 1, 2],
  y: [2, 2, 2],
  mode: "lines+markers+text",
  name: "Lines and Text",
  text: ["Text G", "Text H", "Text I"],
  textposition: "bottom",
  textfont: {
    family: "sans serif",
    size: 18,
    color: "#ff7f0e"
  },
  type: "scatter"
};
var data = [trace1, trace2];
var layout = {showlegend: false};
var graphOptions = {layout: layout, filename: "text-chart-styling", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Styling and Coloring Annotations

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

require('plotly')(username, api_key);

var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 3, 2, 4, 3, 4, 6, 5],
  type: "scatter"
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 4, 5, 1, 2, 2, 3, 4, 2],
  type: "scatter"
};
var data = [trace1, trace2];
var layout = {
  showlegend: false,
  annotations: [
    {
      x: 2,
      y: 5,
      xref: "x",
      yref: "y",
      text: "max=5",
      showarrow: true,
      font: {
        family: "Courier New, monospace",
        size: 16,
        color: "#ffffff"
      },
      align: "center",
      arrowhead: 2,
      arrowsize: 1,
      arrowwidth: 2,
      arrowcolor: "#636363",
      ax: 20,
      ay: -30,
      bordercolor: "#c7c7c7",
      borderwidth: 2,
      borderpad: 4,
      bgcolor: "#ff7f0e",
      opacity: 0.8
    }
  ]
};
var graphOptions = {layout: layout, filename: "style-annotation", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});