CODEWITHSUNDEEP
javascriptcss
user3106579
user3106579

Reputation: 663

hide label of x-axis using css in morris js

as you can see here http://jsbin.com/acOmiQU/1/edit the label is too long to be displayed on x, but the tag has no class, how can I hide it?

Upvotes: 2

Views: 5188

Answers (4)

Fola Azeez
Fola Azeez

Reputation: 111

Include this in the configuration options to hide X axis:

axes:"y"

Include this in the configuration options to hide Y axis:

axes:"x"

Upvotes: 2

Daren Delima
Daren Delima

Reputation: 131

I just want to have an update on this one. I had a problem when I use "display: none;" on the text of x-axis. The overall size of the svg got affected specially the y-axis label where it will only show 2 characters/digits at most because the other characters/digits got overflowed.

So what I used is:

text[text-anchor="middle"]{
    opacity: 0;
}

Upvotes: 0

Nitin Srivastava
Nitin Srivastava

Reputation: 11

Morris.Bar({
// ...
xLabelAngle: 1,
});

Try changing the xLabelAngle option to 1 degree value - it generates labels on the x-axis with a attribute of y="313.542402245" to all x axis labels.

Now, simply target all the x axis labels through CSS like this...

text[y="313.542402245"] {
display: none;
}

EDITED

Another solution is to hide x-axis label by editing morris js file ---

Find this code into morris js 

Bar.prototype.drawXAxisLabel = function(xPos, yPos, text) {
var label;
return label = this.raphael.text(xPos, yPos, text).attr('font-size', this.options.gridTextSize).attr('font-family', this.options.gridTextFamily).attr('font-weight', this.options.gridTextWeight).attr('fill', this.options.gridTextColor);
};

and replace it with the below one.

Bar.prototype.drawXAxisLabel = function (xPos, yPos, text) {
var label;
return label = this.raphael.text(xPos, yPos, '').attr('font-size', this.options.gridTextSize).attr('font-family', this.options.gridTextFamily).attr('font-weight', this.options.gridTextWeight).attr('fill', this.options.gridTextColor);
};

Upvotes: 1

Yuriy Galanter
Yuriy Galanter

Reputation: 39777

Try targeting:

text[text-anchor="middle"]{
  display:none
}

Apparently it's unique for X-axis labels.

Demo: http://jsbin.com/AKIJUteW/1/edit

Upvotes: 4

Related Questions