How to hide y axis line in ChartJs?

Question

I am using bubble chart and gotta hide the y axis line. I've tried the following but it doesn't work.

yAxes: [{
  angleLines: {
    display: false
  }
}]

Can you show the complete code you are using? Preferably In the fiddle. — Daniel Barral, Jul 27 '16 at 01:38
Jaipradeesh, could you change the accepted answer, so the correct one is shown first? — Matt, May 06 '18 at 14:46

Matt · Accepted Answer · 2018-10-23T21:15:35.640

146

This disables the vertical Y axis line:

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

This can be combined with display to disable the vertical gridLines:

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

Here's a working example: http://codepen.io/anon/pen/xqGGaV

edited Oct 23 '18 at 21:15

answered Feb 26 '17 at 20:41

Matt

3,682
1
21
27

Thanks! I also wanted to add that if you want to hide everything about the x-axis use ticks: {display: false}, gridLines: { display: false, drawBorder: false}}] for the xAxes key. The same works for yAses too of course – Blake Jul 26 '17 at 20:38
1

Kinda counterintuitive. I'd expect adding `display: false` to an object to hide everything there is.. – iuliu.net Oct 19 '18 at 11:05

Morteza Rahmani · Answer 2 · 2022-07-09T17:54:13.787

36

From version 3 upwards, you should use this options to hide axes completely:

Picture: chartjs-without-axes

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

UPDATE:

If you want to hide only the lines (and keep ticks) , move display: false config to "grid" parameter, like this:

scales: {
   y: {
      grid: {
         display: false
      }
   }
}

edited Jul 09 '22 at 17:54

answered Apr 21 '21 at 17:41

Morteza Rahmani

516
6
7

Unfortunately, this option will hide the ticks too – Roy Margasa Jun 16 '22 at 09:02
@RoyMargasa Thank you for pointing this out. I wrote a solution for hiding ticks problem – Morteza Rahmani Jul 09 '22 at 17:58
updated answer hides the grid lines but not the axis. the below answer from @Developer works. – biko Aug 10 '22 at 06:14

score 24 · Answer 3 · answered Jun 17 '21 at 19:39

24

For Chartjs version 3.3.2 this works for me

var barChart = new Chart(ctx,{
    type: 'bar',
    data: data,
    options: {
        scales:
        {
            y: {
                grid: {
                    drawBorder: false, // <-- this removes y-axis line
                    lineWidth: 0.5,
                }
            }
        }
    }
});

answered Jun 17 '21 at 19:39

Mahamudul Hasan

452
3
13

correct answer for v3 – biko Aug 10 '22 at 06:13

score 12 · Answer 4 · answered Jul 27 '16 at 12:03

12

var myBubbleChart = new Chart(ctx,{
    type: 'bubble',
    data: data,
    options: {
        scales:
        {
            yAxes: [{
                gridLines : {
                    display : false
                }
            }]
        }
    }
});

answered Jul 27 '16 at 12:03

Daniel Barral

3,896
2
35
47

score 11 · Answer 5 · answered Jul 27 '16 at 06:01

var ctx = document.getElementById("myChart");

var data = {
    datasets: [
        {
            label: 'First Dataset',
            data: [
                { x: 20, y: 30, r: 10 },
                { x: 40, y: 10, r: 10 },
                { x: 30, y: 20, r: 30 }
            ]
        }]
};

var myBubbleChart = new Chart(ctx,{
    type: 'bubble',
    data: data,
    options: {
        scales:
        {
            yAxes: [{
                display: false
            }]
        }
    }
});

That would hide the axes itself. I need the ticks. But not the line. — dolftax, Jul 27 '16 at 10:07

score 8 · Answer 6 · answered Jan 06 '23 at 08:15

8

in version 4.1.1 I was actually looking for:

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

answered Jan 06 '23 at 08:15

halafi

1,064
2
16
26

score 5 · Answer 7 · answered Feb 25 '20 at 14:38

5

so if you only want to hide the grid lines only on the chart , but keep the axis line:

gridLines : {
    drawOnChartArea: false
}

With above examples it will be like:

var myBubbleChart = new Chart(ctx,{
    type: 'bubble',
    data: data,
    options: {
        scales:
        {
            yAxes: [{
                gridLines : {
                    drawOnChartArea: false
                }
            }]
        }
    }
});

answered Feb 25 '20 at 14:38

Tasawar Hussain

650
7
21

This worked for me (2.9.4), previous answers seem to be for older versions. – tristansokol Jan 19 '21 at 19:15
Perfect. Worked like a charm!! – Anoop Nair Feb 26 '21 at 15:19

score 3 · Answer 8 · answered Dec 03 '20 at 17:23

3

I use this:

scales: {
    xAxes: [{
        display: false,
    }],
    yAxes: [{
        display: false,
    }]
}

answered Dec 03 '20 at 17:23

Gennady Magomaev

1,157
6
8

score 2 · Answer 9 · answered Dec 29 '20 at 12:12

Put your option config like this

 options: {
        legend: {
        display: false
    },

        title: {
            display: true,
            text: title+` (${data.reduce((a,b)=>a+b,0)})`
        }
        ,
        scales: {
            yAxes: [{
                display: false,
                
            }]
        }
    }

score 1 · Answer 10 · answered Apr 10 '20 at 16:52

For the latest chart.js (v2.9.3) library: You can do this in chart options to disable a particular axis:

This chart can be obtained like so:

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

How to hide y axis line in ChartJs?

10 Answers10

Linked