Coordinates of a shape don't work

Probably it is something very stupid, but it is driving me crazy. I hope someone can help me.
I have been trying using shapes following the instructions... whichever X0, Y0, X1, Y1, I set, the shapes don't change position.
Here following I put a very simple component showing the problem. I would expect an horizontal line at Y = 14, but this is not the case. Whichever are the values in X0, Y0, X1, Y1 and the xref/yref settings the the output is always the same as shown in the attached image

.

import React, { Component } from 'react';
import Plot from 'react-plotly.js';

class App extends Component {
render() {
const data = [{
x: [0,1,2,3,4,5,6,7,8],
y: [10,11,12,13,14,15,16,17,18],
type: 'scatter',
mode: 'lines+points',
marker: { color: 'blue'}
}];

  const layout = {
    width: 600,
    height: 300,
    showlegend: false,
    shapes: [
      {
        type: 'line',
        line: {
          color: 'red',
          width: 3,
          dash: 'dot',
        },
        X0: 0,
        Y0: 14,
        X1: 8,
        Y1: 14
      }
    ]
  };

  return (
    <Plot data={ data } layout={ layout}/>
  )
}

}

export default App;

Commencez par le composant App fourni et inspectez la configuration layout.shapes, en particulier les noms des propriétés de coordonnées utilisés pour la ligne. Confirmez que l’exemple affiche une ligne rouge horizontale à Y = 14 lorsque les champs de coordonnées sont reconnus.