How to remove the line/rule of an axis in Chart.js?

Question

I managed to remove all horizontale lines/rules in my chart using this:

scales: {
       xAxes: [{
        gridLines: {
            display: false
        }  
    }]
}

But I also want to get rid of the rule/bar that represents the Y-axis as well. But I want to keep the labels:

Unfortunately I can't find any option for that. I can only remove the whole axis including labels.

I'm using Chart.js 2.3.

Shoa

in x axis gridLines u make it as false and looking in the y axis to display the false – Hellbender

@Hellbender The example show ho to remove the horizontal gridlines. But this option doesn't remove the actual line for the axis (horizontally or vertically doesn't matter). So I'm looking for an option how to remove the actual line of the axis not only the grid lines. – Shoa

Answer 1

I found a way to remove this line. It's actually called the border of the axis and there's an option for it, see "Grid Line Configuration":

scales: {
    yAxes: [{
        gridLines: {
            drawBorder: false,
        }
    }]
}

Shoa

This doesnot work. DownVoted because of that (sorry) this code worked for me: gridLines: { display:false } Update it and I will upvote again! – Flita

worked for me, I already had display:none but was not sufficient for that borders. thanks – Wilton

Doesn't work in v.2.9.0, but fixed in v.3.0.0 github.com/chartjs/Chart.js/issues/6876 – Cicala

Answer 2

In v3 you can do:

options: {
  scales: {
    y: {
      grid: {
        drawBorder: false,
      }
    }
  }
}

https://www.chartjs.org/docs/master/axes/styling#grid-line-configuration

Milwaukee

Answer 3

This should work

 options: {
     scales: {
          yAxes: [{
               gridLines: {
                  display: false,
              }
          }]
     },
  }

Uniseptate

Answer 4

This worked for me in version 2.8.0 -

scales: {
    yAxes: [{
        gridLines: {
            tickMarkLength: false,
        }
    }]
}

Haemolysin

Answer 5

The left line is still coming from the x axis grid lines. Changing the 'zeroLineColor' of the x axis to 'transparent' hid it.

xAxes:[{
gridLines:{
zeroLineColor:'transparent'
}}]

Source: https://github.com/chartjs/Chart.js/issues/3950

Frown

Answer 6

In the version 4.x.x you do it like this:

options: {
  scales: {
    y: {
       border: {
        display: false,
      },
    },
    x: {
      grid: {
        drawOnChartArea: false,
      },
    },
  },
},

The border in y is the option that specifically does what you are asking. I added the x for users that also want to see how to hide the rest of the x axis lines.

Cottonseed

Answer 7

gridLines: {zeroLineColor: 'transparent'}

Idiographic

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Blackstone

While this code may solve the OP's issue, it is better to add context, or an explanation as to why this solves the OP's problem, so future visitors can learn from your post, and apply this knowledge to their own issues. High Quality Answers are much more likely to be upvoted, and contribute to the value and quality of SO as a platform. You can also add a link to documentation, if that helps. – Dolphin

@john An answer that's not fully explained, incomplete, or just plain wrong is still an answer. If you think it's a bad answer, that's what downvotes are for. See when to flag an answer as “not an answer”? – Lacerta

Answer 8

this workerd for me yAxes: [ { gridLines: { display: false, }, }, ],

Ceresin

Answer 9

This worked for me in v4.4

---

scales: {
x: {
  border: {
    display: false,
  },
},
y: {
  border: {
    display: false,
  },
}

---

Generic

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Marlonmarlow

Answer 10

You can use the scaleLineColor: 'transparent' it will remove the y any x axis

Hellbender

This will remove the labels as well, right? The labels should stay. Only the line should be gone. – Shoa

you want to remove both the axis lines? – Hellbender

Actually only the Y-axis line. Is this a global setting? I can't find it in the Chart.js docs. – Shoa

new Chart(ctx, { type: 'line', data: data, options: { scales: { yAxes: [{ display: false }] } } }); please have a look on the link it will help you chartjs.org/docs/#line-chart-chart-options – Hellbender

Thanks a lot for your help - I found an option to remove the line, which is actually the "´border`" option of the gridlines. – Shoa

ha ha ha okie thank you.. give the support flag to my comment :P – Hellbender