Plot.ly: Simple prefix or suffix for hover text

Question

I've tried reading the documentation but I haven't found a simple way to add a suffix to a hover text. Is there a way to add text to the hoverformat? For example y respondents where y is the y value.

The setting yaxis: {hoverformat: ''} does not seem to allow strings? I'm used to working with FlotChart where you can simply put "%y respondents".

Any help is much appreciated.

Answer 1

If you set text in your trace you can get a suffix.

Sets text elements associated with each (x,y) pair. If a single string, the same string appears over all the data points. If an array of string, the items are mapped in order to the this trace's (x,y) coordinates.

Together with hoverinfo (hoverinfo: 'text+y') you get close to what you what you want (except for the unneeded line break which would need to be removed manually).

---

For bar charts this does not seem to work (at least not in Jan 2017). It is necessary to replicate the data and write it into an array in the text attribute (which also solves the line break issue).

var N = 16,
  x = Plotly.d3.range(N).map(Plotly.d3.random.normal(3, 1)),
  y = Plotly.d3.range(N),

  data = [{
    x: x,
    y: y,
    type: 'scatter',
    mode: 'markers',
    text: 'respondents',
    marker: {
      size: 16
    },
    hoverinfo: 'text+y'
  }],
  layout = {
    hovermode: 'closest',
  };

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

//here comes the bar chart
var data = [{
  x: ['Jan', 'Feb', 'Mar'],
  y: [20, 14, 25],
  type: 'bar',
  text: [],
  hoverinfo: 'text'
}];

for (N = 0; N < data[0].y.length; N += 1) {
  data[0].text.push(data[0].y[N] + ' Respondents');
}
Plotly.plot('myBarChart', data);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width:400px;height:400px;"></div>
<div id="myBarChart" style="width:400px;height:400px;"></div>