When update Plotly marker size, I want to preserve graph padding

user_5809394 0
Viewed 305

Initial marker size is 16. first marker sie

When I update marker size to 30, then graph layout's padding change too. enter image description here

Try below codepn.

Codepen

var myPlot = document.getElementById('myDiv'),
    x = [1, 2, 3, 4, 5, 6],
    y = [1, 2, 3, 2, 3, 4],
    colors = ['#00000','#00000','#00000',
              '#00000','#00000','#00000'],
    data = [{x:x, y:y, type:'scatter',
             mode:'markers', marker:{size:16, color:colors}}],
    layout = {
        hovermode:'closest',
        title:'Click on a Point to Change Color<br>Double Click (anywhere) to Change it Back'
     };

Plotly.newPlot('myDiv', data, layout);

myPlot.on('plotly_click', function(data){
  var pn='',
      tn='',
      colors=[];
  for(var i=0; i < data.points.length; i++){
    pn = data.points[i].pointNumber;
    tn = data.points[i].curveNumber;
    colors = data.points[i].data.marker.color;
  };
  colors[pn] = '#C54C82';
    
  var update = {'marker':{color: colors, size:30}};
  Plotly.restyle('myDiv', update, [tn]);
});

Can I preserve graph layout with only marker size change?

plotly javascript
1 Answers

Set the following inside your layout object

    xaxis: {range: [0.5, 6.5]}
    yaxis: {range: [0.5, 4.5]}

You could make this dynamic by getting your list of data points and calculating the range from there. Basically pick a padding you want and subtract it from the first element of x and y, and add the padding to the last element of x and y. Check example below,

    let xaxis = { range: [ x[0] - padding, x[x.length - 1] + padding] }
    let yaxis = { range: [ y[0] - padding, y[y.length - 1] + padding] }

Resource: https://plotly.com/javascript/axes/#setting-the-range-of-axes-manually

Here is a running example with the updated layout object

var myPlot = document.getElementById('myDiv'),
    x = [1, 2, 3, 4, 5, 6],
    y = [1, 2, 3, 2, 3, 4],
    colors = ['#00000','#00000','#00000',
              '#00000','#00000','#00000'],
    data = [{x:x, y:y, type:'scatter',
             mode:'markers', marker:{size:35, color:colors}}],
    layout = {
        hovermode:'closest',
        title:'Click on a Point to Change Color<br>Double Click (anywhere) to Change it Back',
        xaxis: {range: [0.5, 6.5]},  // Lines added
        yaxis: {range: [0.5, 4.5]}   // Lines added
     };

Plotly.newPlot('myDiv', data, layout);

myPlot.on('plotly_click', function(data){
  var pn='',
      tn='',
      colors=[];
  for(var i=0; i < data.points.length; i++){
    pn = data.points[i].pointNumber;
    tn = data.points[i].curveNumber;
    colors = data.points[i].data.marker.color;
  };
  colors[pn] = '#C54C82';
    
  var update = {'marker':{color: colors, size:30}};
  Plotly.restyle('myDiv', update, [tn]);
});

myPlot.on('plotly_doubleclick', function(){
  var orgColors = ['#00000','#00000','#00000',
                   '#00000','#00000','#00000'];
  var update = {'marker':{color: orgColors, size:16}};
  Plotly.restyle('myDiv', update);
});
<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  
  <div id="myDiv" style="width: 800px; height: 500px;"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>

user_141672160
Related