How to hide y axis line in ChartJs?

Javascript Problem Overview

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
  }
}]

Javascript Solutions

Solution 1 - Javascript

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

Solution 2 - Javascript

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,
                }
            }
        }
    }
});

Solution 3 - Javascript

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

Picture: chartjs-without-axes

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

Solution 4 - Javascript

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
            }]
        }
    }
});

Solution 5 - Javascript

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

Solution 6 - Javascript

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
                }
            }]
        }
    }
});

Solution 7 - Javascript

I use this:

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

Solution 8 - Javascript

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,
                
            }]
        }
    }

Solution 9 - Javascript

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,
          },
        },
      ],
    },

Content Type	Original Author	Original Content on Stackoverflow
Question	Jaipradeesh	View Question on Stackoverflow
Solution 1 - Javascript	Matt	View Answer on Stackoverflow
Solution 2 - Javascript	Developer	View Answer on Stackoverflow
Solution 3 - Javascript	Morteza Rahmani	View Answer on Stackoverflow
Solution 4 - Javascript	Daniel Barral	View Answer on Stackoverflow
Solution 5 - Javascript	Daniel Barral	View Answer on Stackoverflow
Solution 6 - Javascript	Tasawar Hussain	View Answer on Stackoverflow
Solution 7 - Javascript	Gennady Magomaev	View Answer on Stackoverflow
Solution 8 - Javascript	Amit Prajapati	View Answer on Stackoverflow
Solution 9 - Javascript	Adithya Sreyaj	View Answer on Stackoverflow