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


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’],

” +

var layout = {
xaxis: {


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

Above is the code.

Thank you.