When update Plotly marker size, I want to preserve graph padding
Question
Initial marker size is 16.
When I update marker size to 30, then graph layout's padding change too.
Try below codepn.
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?
1 answers
solution1
1 ACCPTED 2020-09-03 03:49:53
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.