We’re trying to change the tick labels of the chart. We’ve tried using a label input to increase or decrease the value and tried to extract the value with the help of getElementById. Then we define the label size inside the Plotly.restyle tag.
The code:
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-2.24.1.min.js'></script>
</head>
<body>
<input type="number" id="LabelSizeInput" placeholder="Enter label size" />
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
The JavaScript Code :
function gaussianRand() {
var rand = 0;
for (var i = 0; i < 6; i += 1) {
rand += Math.random();
}
return (rand / 6) - 0.5;
}
var X = [],
Y = [],
n = 100000,
i;
for (i = 0; i < n; i += 1) {
X.push(gaussianRand());
Y.push(gaussianRand());
}
var data = [{
type: "scattergl",
mode: "markers",
marker: {
line: {
width: 1,
color: '#404040'
}
},
x: X,
y: Y
}];
var layout = {
xaxis: {
tickfont: {
size: 12 // Set the desired size for x-axis tick values
}
},
yaxis: {
tickfont: {
size: 12 // Set the desired size for y-axis tick values
}
}
};
Plotly.newPlot('myDiv', data, layout);
var inputElement = document.getElementById('LabelSizeInput');
inputElement.addEventListener('input', function() {
var label_size = parseInt(inputElement.value);
if (!isNaN(label_size)) {
Plotly.restyle('myDiv', {
'xaxis.tickfont.size': label_size,
'yaxis.tickfont.size': label_size,
});
}
});
Plotly.restyleis able to change only attributes in the data array, while the axes properties are not related to data, they are layout properties.This, the function you should use is
Plotly.relayout, with the same argument.Code pen with full code.
One may also consider using
Plotly.update, that is able to do both data and layout updates.