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>
2 Answers
Answers 1
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>Answers 2
Here is a simplistic way to achieve this.
Approach:
Since the alignment issue occours when you change from 'lines' to 'lines+markers'. The solution is to use the same 'lines+markers' mode for both, but you can just set the marker width to a very small value say 1 so that its not noticable!
Solution:
Marker size is set to a very small value, so that its gives the appearance of a normal line chart without markers!
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', marker: { size: 1 } }; Chart One (Only Lines visible/ markers very small):
<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', marker: { size: 1 } }; var data = [trace1]; Plotly.newPlot('myDiv', data, layout); </script> </body>Chart Two (No change made) [added for comparison]:
<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>
0 comments:
Post a Comment