2015-10-08-rounding-hover-values.html

---
name: Rounding X and Y Hover Values
language: plotly_js
suite: hover
order: 2
sitemap: false
arrangement: horizontal
---
// Round x and y hover values by setting hoverformat in layout.xaxis and/or layout.yaxis
// using D3 number formatting ( https://github.com/d3/d3-format/blob/master/README.md#locale_format )

var d3 = Plotly.d3,
    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);