Hover Text and Formatting in JavaScript

How to add hover text and format hover values in D3.js-based javascript charts.


New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

var data = [
  {
    x: [0, .5, 1, 1.5, 2],
    y: [1, 3, 2, 4, 2],
    mode: 'markers',
    marker: {size:16},
    text: ['Text A', 'Text B', 'Text C', 'Text D', 'Text E'],
    type: 'scatter'
  }
];
var layout = {title: 'Hover over the points to see the text'};
Plotly.newPlot('myDiv', data, layout);
// Round x and y hover values by setting hoverformat in layout.xaxis and/or layout.yaxis
// using D3 number formatting ( https://github.com/mbostock/d3/wiki/Formatting )

var N = 40,
    x = d3.range(N).map( d3.random.normal() ),
    y1 = d3.range(N).map( d3.random.normal() ),
    y2 = d3.range(N).map( d3.random.normal() ),
    data = [{ x:x, y:y1, type:'scatter', mode:'markers',
              marker:{color:'rgba(200, 50, 100, .7)', size:16},
              hoverinfo:"x+y"
             },
            { x:x, y:y2, type:'scatter', mode:'markers',
             marker:{color:'rgba(10, 180, 180, .8)', size:16},
             hoverinfo:"x+y"}];
    layout = {
        hovermode:'closest',
        title:'Formatting X & Y Hover Values',
        xaxis:{zeroline:false, hoverformat: '.2f', title: 'Rounded: 2 values after the decimal point on hover'},
        yaxis:{zeroline:false, hoverformat: '.2r', title: 'Rounded: 2 significant values on hover'}
     };

Plotly.newPlot('myDiv', data, layout);
var data = [
    {
        type: 'scatter',
        mode: 'lines+markers',
        x: [1,2,3,4,5],
        y: [2.02825,1.63728,6.83839,4.8485,4.73463],
        hovertemplate: '<i>Price</i>: $%{y:.2f}' +
                        '<br><b>X</b>: %{x}<br>' +
                        '<b>%{text}</b>',
        text: ["Text A", "Text B", "Text C", "Text D", "Text E"],
        showlegend: false
    },
    {
        x: [1,2,3,4,5],
        y: [3.02825,2.63728,4.83839,3.8485,1.73463],
        hovertemplate: 'Price: %{y:$.2f}<extra></extra>',
        showlegend: false
    }
];

var layout = {
    title: "Set hover text with hovertemplate",
};

Plotly.newPlot('myDiv', data, layout);
d3.csv(
  "https://raw.githubusercontent.com/plotly/datasets/master/job-automation-probability.csv",
  function(rows) {
    var x = [],
      y = [],
      s = [],
      c = [],
      t = [];

    for (var i = 0; i < rows.length; i++) {
      row = rows[i];
      y.push(row["Average annual wage"]);
      x.push(row["prob"]);
      s.push(row["numbEmployed"]);
      c.push(row["education"]);
      t.push(row["short occupation"]);
    }

    Plotly.newPlot('myDiv', {
      data: [
        {
          type: "scatter",
          mode: "markers",
          x: x,
          y: y,
          text: t,
          marker: { size: s, sizeref: 4000, sizemode: "area" },
          transforms: [{ type: "groupby", groups: c }],
          hovertemplate:
            "<b>%{text}</b><br><br>" +
            "%{yaxis.title.text}: %{y:$,.0f}<br>" +
            "%{xaxis.title.text}: %{x:.0%}<br>" +
            "Number Employed: %{marker.size:,}" +
            "<extra></extra>"
        }
      ],
      layout: {
        title: "Higher Risk of Job Automation in Lower Paying Jobs",
        hovermode: "closest",
        hoverlabel: { bgcolor: "#FFF" },
        legend: {orientation: 'h', y: -0.3},
        xaxis: {
          tickformat: ".0%",
          title: "Automation Probability",
          zeroline: false
        },
        yaxis: {
          title: "Income",
          zeroline: false
        }
      },
      config: { responsive: true }
    });
  }
);