Black Lives Matter. Please consider donating to Black Girls Code today.

How to customize hoverinfo for bar chart


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’,
hoverinfo: ‘z+text’,
textposition: ‘auto’,
type: ‘bar’
var trace2 = {
y: xValue,
x: yValue2,
z: zValue2,
orientation: ‘h’,
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});


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,

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

Added hovertemplate: ‘%{x}

Thank you.