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.

Adding Hover Text to Data in Line and Scatter Plots

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: {
      text: 'Hover over the points to see the text'
  }
};
Plotly.newPlot('myDiv', data, layout);

Rounding X and Y Hover Values

// 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: {
        text: 'Formatting X & Y Hover Values'
    },
    xaxis: {
        zeroline: false,
        hoverformat: '.2f',
        title: {
            text: 'Rounded: 2 values after the decimal point on hover'
        }
    },
    yaxis: {
        zeroline: false,
        hoverformat: '.2r',
        title: {
            text: 'Rounded: 2 significant values on hover'
        }
    }
};

Plotly.newPlot('myDiv', data, layout);

Hovertemplate

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: {
        text: "Set hover text with hovertemplate"
    },
};

Plotly.newPlot('myDiv', data, layout);

Advanced Hovertemplate

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: {
          text: "Higher Risk of Job Automation in Lower Paying Jobs"
        },
        hovermode: "closest",
        hoverlabel: { bgcolor: "#FFF" },
        legend: { orientation: 'h', y: -0.3 },
        xaxis: {
          tickformat: ".0%",
          title: {
            text: "Automation Probability"
          },
          zeroline: false
        },
        yaxis: {
          title: {
            text: "Income"
          },
          zeroline: false
        }
      },
      config: { responsive: true }
    });
  }
);