How to customize hoverinfo for bar chart

plotly.js
1

Hi,

I am trying to add zValue1 and zValue2 value in hover tooltip. I do not want to display z value on bar but want to show only in hover tool tip.

I am using below js:

xValue = [‘giraffes’, ‘orangutans’, ‘monkeys’],
yValue1 = [20, 14, 23];
yValue2 = [24, 16, 20];
zValue1 = [“11.4%”, “7.9%”, “13.1%”];
zValue2 = [“14.4%”, “9.6%”, “12%”];
var trace1 = {
y: xValue,
x: yValue1,
z: zValue1,
orientation: ‘h’,
text: yValue1.map(String),
hoverinfo: ‘z+text’,
textposition: ‘auto’,
type: ‘bar’
};
var trace2 = {
y: xValue,
x: yValue2,
z: zValue2,
orientation: ‘h’,
text: yValue2.map(String),
hoverinfo: ‘z+text’,
textposition: ‘auto’,
type: ‘bar’,
};
var data = [trace1, trace2];
var layout = {
title: ‘Colored Bar Chart’,
barmode: ‘stack’
};
Plotly.newPlot(‘myDiv’, data, layout, {showSendToCloud:true});

Result:
image

Expected is to display 13.1%, 23 instead of 23, 23.

Can anyone please suggest how to get z value along with text?

Thanks in advance,
Vikas

2

Found a solution on below thread: How to display 'variable' text in a hover template

Added hovertemplate: ‘%{x}
%{customdata}’,

Thank you.

3

How do I so that the information about the bars does not come out crooked? please i need help with this.