Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to hide y axis line in ChartJs?

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    }  }]
like image 625
Jaipradeesh Avatar asked Jul 26 '16 14:07

Jaipradeesh


People also ask

How do you hide gridLines in Chartjs?

If you want to hide gridlines in Chart. js, you can use the above code. Yor will have to 'display: false' in gridLines object which is specified on the basis of Axis. You can use 'xAxes' inside scales object for applying properties on the x-axis.

How do you make a line graph in Chartjs?

When we're creating a chart using the Chart. js framework, we're going to need a canvas element. The Chart JS library relies on canvas elements. So create a canvas element in the HTML section, give it an ID of line-chart , and then close off that canvas element.


2 Answers

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

like image 61
Matt Avatar answered Sep 22 '22 19:09

Matt


var myBubbleChart = new Chart(ctx,{     type: 'bubble',     data: data,     options: {         scales:         {             yAxes: [{                 gridLines : {                     display : false                 }             }]         }     } }); 
like image 40
Daniel Barral Avatar answered Sep 21 '22 19:09

Daniel Barral