Menu
Is there a way to prevent Plotly from changing the padding on the x-axis when adding markers to a line chart.
Please see the two snippets below. The only difference is line 24 where 'lines' is changed to 'lines+markers'.
First snippet without markers:
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<script>
var layout = {
xaxis: {
showticklabels: true,
tickmode: 'auto',
nticks: 15,
tickangle: 45,
rangemode: 'tozero',
},
};
var trace1 = {
x: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
y: [10, 15, 13, 17, 10, 15, 13, 17],
type: 'scatter',
mode: 'lines',
};
var data = [trace1];
Plotly.newPlot('myDiv', data, layout);
</script>
</body>Second snippet with markers:
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<script>
var layout = {
xaxis: {
showticklabels: true,
tickmode: 'auto',
nticks: 15,
tickangle: 45,
rangemode: 'tozero',
},
};
var trace1 = {
x: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
y: [10, 15, 13, 17, 10, 15, 13, 17],
type: 'scatter',
mode: 'lines+markers',
};
var data = [trace1];
Plotly.newPlot('myDiv', data, layout);
</script>
</body>
211
This is a little bit confusing as it is actually the y-axis that is off.
Anyhow this can be resolved by setting the yaxis to showgrid: false then offsetting the yaxislayer-above to relocate the labels.
This could be done in css, as I have, or in Javascript.
I might not have it pixel identical here (set at 102px) but you should get the idea.
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
.yaxislayer-above {
transform: translate(102px,100px);
}
</style>
</head>
<body>
<div id="myDiv">
</div>
<script>
var layout = {
yaxis: {
showgrid: false,
},
xaxis: {
showticklabels: true,
tickmode: 'auto',
nticks: 15,
tickangle: 45,
rangemode: 'tozero',
},
};
var trace1 = {
x: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
y: [10, 15, 13, 17, 10, 15, 13, 17],
type: 'scatter',
mode: 'lines+markers',
};
var data = [trace1];
Plotly.newPlot('myDiv', data, layout);
</script>
</body>I had the same problem, and the solution I found was to set autorange to false AND specify the x-axis range. See: https://plot.ly/javascript/reference/#layout-xaxis-range
Fixed example:
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<script>
var layout = {
xaxis: {
showticklabels: true,
tickmode: 'auto',
nticks: 15,
tickangle: 45,
rangemode: 'tozero',
range: [0, 7]
},
};
var trace1 = {
x: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
y: [10, 15, 13, 17, 10, 15, 13, 17],
type: 'scatter',
mode: 'lines+markers',
};
var data = [trace1];
Plotly.newPlot('myDiv', data, layout);
</script>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
