Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Plotly.js x-axis cannot remove line

I'm new to Plotly. and practising by creating a dummy line chart. I have a problem removing the x-axis showline. I have set it to false, used zeroline, and tried to make transparent using linecolor but still it remains. Coincidentally, the y-axis works fine, as does showgrid for both axis's.

I have some inkling the issue may arise from the 'category' type used to show seasons '2017-18', '2018-19' etc but would appreciate confirmation (or a workaround) from someone more experienced with Plotly. Thanks.


var bedford = {
x: ['2009-10', '2010-11', '2011-12', '2012-13', '2013-14', '2014-15', '2015-16', '2016-17', '2017-18', '2018-19'],
y: [2812, 2654, 2828, 3051, 2261, 2496, 2611, 2515, 2530, 2527],
name: 'Bedford',
mode: 'lines+markers',
line: {
  color: 'rgb(128,191,255)',
  width: 2
  }
};

var birmingham = {
x: ['2009-10', '2010-11', '2011-12', '2012-13', '2013-14', '2014-15', '2015-16', '2016-17', '2017-18', '2018-19'],
y: [975, 894, 881, 971, 947, 1098, 1046, 830, 800, 676],
name: 'Birmingham',
mode: 'lines+markers',
line: {
  color: 'rgb(230,0,0)',
  width: 2
  }
};

var data = [bedford, birmingham];

var layout = {
  title: 'Second Tier Clubs Average Attendances',
  xaxis: {
    title: 'Season',
    type: 'category',
    showline: false,
    linewidth: 0
  },
  yaxis: {
    title: 'Attendance',
    range: [0, 3500],
    showline: false,
    linewidth: 0
  }
};

Plotly.newPlot('attendanceDiv', data, layout);
like image 279
Jsmith Avatar asked Apr 13 '26 01:04

Jsmith


1 Answers

You need to set yaxis: {zeroline: false}, please have a look at this fiddle: http://jsfiddle.net/9xo3rvbg/2/

var data = [bedford, birmingham];

var layout = {
  title: 'Second Tier Clubs Average Attendances',
  xaxis: {
    title: 'Season',
    type: 'category',
    zeroline: false,
    showline: false,
  },
  yaxis: {
    title: 'Attendance',
    range: [0, 3500],
    zeroline: false,
    showline: false,
  }
};

Plotly.newPlot('attendanceDiv', data, layout);
like image 111
schustischuster Avatar answered Apr 14 '26 13:04

schustischuster



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!