JavaScript > Fundamentals > Hover Text and Formatting
Suggest an edit to this page

Hover Text and Formatting in JavaScript

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


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

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);

Unified Hover Mode

If "x unified" (or "y unified"), a single hoverlabel will appear for multiple points at the closest x- (or y-) coordinate within the hoverdistance with the caveat that no more than one hoverlabel will appear per trace.

var data = [
  {
    x: ['2020-01-01', '2020-02-01', '2020-03-01', '2020-04-01'],
    y: [10, 15, 12, 18],
    mode: 'markers+lines',
    name: 'Series A',
    hovertemplate: null,
    type: 'scatter'
  },
  {
    x: ['2020-01-01', '2020-02-01', '2020-03-01', '2020-04-01'],
    y: [8, 12, 16, 14],
    mode: 'markers+lines',
    name: 'Series B',
    hovertemplate: null,
    type: 'scatter'
  }
];

var layout = {
  title: {
    text: "layout.hovermode='x unified'"
  },
  hovermode: 'x unified',
  xaxis: {
    title: 'Date'
  },
  yaxis: {
    title: 'Value'
  }
};

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

Custom Unified Hover Title

New in 3.1

Customize the title shown in unified hovermode by specifying unifiedhovertitle.text. The unified hover title is a template string that supports using variables from the data. Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{x|%A}".

var data = [
  {
    x: ['2020-01-01', '2020-02-01', '2020-03-01', '2020-04-01'],
    y: [150.25, 165.50, 142.75, 178.90],
    mode: 'lines+markers',
    name: 'Stock A',
    type: 'scatter'
  },
  {
    x: ['2020-01-01', '2020-02-01', '2020-03-01', '2020-04-01'],
    y: [85.30, 92.15, 88.45, 95.20],
    mode: 'lines+markers',
    name: 'Stock B',
    type: 'scatter'
  }
];

var layout = {
  title: {
    text: "Stock Prices with Custom Unified Hover Title"
  },
  hovermode: 'x unified',
  xaxis: {
    title: 'Date',
    unifiedhovertitle: {
      text: '<b>%{x|%A, %B %d, %Y}</b>'
    }
  },
  yaxis: {
    title: 'Price (USD)',
    tickprefix: '$'
  }
};

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