Can't extend traces with setting the marker type

With the code below I am trying to create a simple bubble chart. I create a trace to extend it later:

    var t9 = {
        x: [100821],
        y: [11],
        name: 'Some text',
        text: ['Some text'],
        mode: ['markers'],
        marker: [{
          size: [1531*10],
          sizeref: 2,
          sizemode: 'area'
        }]
      };
    var data = [t9];


var layout = {
  title: 'Chart',
  showlegend: true,
  xaxis: {
    title: 'Some text'
  },
  yaxis: {
    title: 'Some text'
  }
};

var config = {responsive: true}

Plotly.newPlot('plot', data, layout, config);



        Plotly.extendTraces(
          'plot', 
        {
          x: [[5491]],
          y: [[5]],
          text: [['Some text']],
          mode: [['markers']],
          marker: [[{
            size: 123*100,
            sizeref: 2,
            sizemode: 'area'
          }]]
        }, [0]);

        

        Plotly.extendTraces(
          'plot', 
        {
          x: [[60022]],
          y: [[11]],
          text: [['Some text']],
          mode: [['markers']],
          marker: [[{
            size: 982*100,
            sizeref: 2,
            sizemode: 'area'
          }]]
        }, [0]);

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<html>
  <body>
    <div id="plot"></div>
  </body>
</html>

The result is this:

As you can see the markers don't take on the property mode: ['markers'] and all of the markers: properties.

Any idea how to get a result like on this page? https://plotly.com/javascript/bubble-charts/

Solution

If you use extendTraces and want to update properties, such marker size you need to provide the attribute as a string, e.g. marker.size and the value must be an array, just like your new x and y values.
```
Plotly.extendTraces(
  'plot', 
  {
    x: [[5491]],
    y: [[5]],
    'marker.size':[[40*100]]
  }, [0]);
```

Your initial data and attributes should be a simple array or object, not an array of arrays/objects.

 var t9 = {
  x: [100821],
  y: [11],
  name: 'Some text',
  text: 'Some text',
  mode: 'markers',
  marker: {
    size: [15*100],
    sizeref: 1,
    sizemode: 'area'
  }
};

var data = [t9];

var layout = {
  title: 'Chart',
  showlegend: true,
  xaxis: {
    title: 'Some text'
  },
  yaxis: {
    title: 'Some text',
    range: [-12, 30]
  }
};

var config = {responsive: true}

Plotly.newPlot('plot', data, layout, config);


Plotly.extendTraces(
  'plot', 
  {
    x: [[5491]],
    y: [[5]],
    'marker.size':[[40*100]]
  }, [0]);

Plotly.extendTraces(
  'plot', 
  {
    x: [[60022]],
    y: [[11]],
   'marker.size':[[200*100]] 
  }, [0]);

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<div id='plot'>

</div>