Shapes not working in javascript

[Patidar]

  var plotDiv = document.getElementById('myDiv2');
  var layout = {
    margin: {
      l: 100,
      r: 100,
      b: 100,
      t: 100,
      pad: .1
    },
    hovermode:'closest',
    title: "Live Data Streaming",
    xaxis: {
      title: "X Axis",
      autorange:true,
      titlefont: {
        family: "Lato, Sans-serif",
        size: 18,
        color: "#002B7F"
      }
    },
    images: [
      {
        x: .92,
        y: .96,
        sizex: 0.3,
        sizey: 0.3,
        source: "graphlogo.png",
        xanchor: "left",
        xref: "paper",
        yanchor: "bottom",
        yref: "paper"
      }
    ],
    yaxis: {
      title: "Live Data",
      autorange:true,
      titlefont: {
        family: "Lato, Sans-serif",
        size: 18,
        color: "#002B7F"
      }
    }
    shapes: [
     {
       type: 'line',
       x0: 2,
       y0: 2,
       x1: 5,
       y1: 2,
       line: {
         color: 'rgb(50, 171, 96)',
         width: 4,
         dash: 'dashdot'
       }
     }
    ]
 };

  var data = [{
    x: [2,5],
    y: [2]
  }];

  Plotly.plot(plotDiv, data, layout);

When i run this, I get this error, output3:104 Uncaught SyntaxError: Unexpected identifier, at the line “shape: [” I have no idea what is wrong. Please help

[etienne]

You’re missing , before the shapes settings.

Here’s a working version: http://codepen.io/etpinard/pen/wWXkKj?