Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to hide the y axis and x axis line and label in my bar chart for chart.js

Tags:

chart.js

I am new to Chart.js and I want to hide the y axis and x axis line and label in my chart. I looked at the documentation and couldn't find a good option. Has anyone else encountered this problem and have a solution?

like image 950
Chris Deering Avatar asked Jul 02 '15 02:07

Chris Deering


People also ask

How do I hide the x-axis labels?

To hide or remove X-axis labels, use set(xlabel=None). To display the figure, use show() method.

How do I hide axis labels?

To change the position of the labels, in the Axis labels box, click the option that you want. Tip To hide tick marks or tick-mark labels, in the Axis labels box, click None.

How do you hide y-axis labels in Chartjs?

To also hide the tick marks themselves, add gridLines: { tickMarkLength: 0 } to the y axis definition (tested in version 2.9. 4).


1 Answers

Using the showScale option would be better

var ctx = document.getElementById("LineWithLine").getContext("2d");
new Chart(ctx).Line(data, {
    showScale: false
});

Fiddle - http://jsfiddle.net/wb3kcunt/

This hides gridlines too. If you want to hide only the axes and labels and not the grid lines, just set scaleFontColor and scaleLineColor to a transparent color.

like image 162
potatopeelings Avatar answered Oct 11 '22 00:10

potatopeelings