Bar chart with both direct labels and hover text

plotly.js
1

The hover text is getting duplicated when I enable direct labels.

54 AM

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 4, 9, 16],
  name: 'Trace1',
  text: [10, 4, 9, 16],
  textposition: 'auto',
  type: 'bar'
};
var trace2 = {
  x: [1, 2, 3, 4],
  y: [0, -8, -4.5, 8],
  text: [0, -8, -4.5, 8],
  textposition: 'auto',
  name: 'Trace2',
  type: 'bar'
};
var trace3 = {
  x: [1, 2, 3, 4],
  y: [-8, -3, 4.5, -8],
  text: [-8, -3, 4.5, -8],
  textposition: 'auto',
  name: 'Trace3',
  type: 'bar'
 }
 
 var trace4 = {
  x: [1, 2, 3, 4],
  y: [-4, 3, -3, -4],
   text: [-4, 3, -3, -4],
  textposition: 'auto',
  name: 'Trace4',
  type: 'bar'
 }

Is there any way to achieve both the label and hover text? I can use annotations, but it does not seem to work for relative barmode where i need the annotations for each of the bar traces.

2

After delving into the plotly.js code, I made it work by using the attribute:
hoverinfo: 'text'

1 Like