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>1 Answers
Answers 1
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