Plotly js bar chart customize long x axis value without changing the hover text

plotly.js
1

Capture

Hi,
I have the above bar chart where x axis values are very long.I tried to trim the x axis values but the hover values also gets trimmed.
Is there any way to provide different x axis value and hover value .

var data = [{
x: [‘giraffes’, ‘orangutans’, ‘monkeys’],
y: [20, 14, 23],
type: ‘bar’,hovertext:[‘giraff’, ‘orangutans’, ‘monkeys’],
hovertemplate:
“%{hovertext}

” +
“”,
}];

var layout = {
xaxis: {

}
}

Plotly.newPlot(‘graph’, data, layout);

Above is the code.

Thank you.