CODEWITHSUNDEEP
jquerylabelmorris.js
Aaron
Aaron

Reputation: 31

Morris.JS X-Axis Label Height

I have a chart generated with Morris.JS but the labels on the x-axis are to long and being cut off due to the limited height of the area showing the labels.

The code below would render a graph that only shows the partial label for "COUNTY PARK ROAD ELEM.". How can I adjust the height of the label area to show the entire text?

The code is as follow

if ($('#IP1').length){ 

    Morris.Bar({
      element: 'IP1',
      data: [           
            {x: 'COUNTY PARK ROAD ELEM.', yIndex: 376.92}                   
      ],
      xkey: 'x',
      ykeys: ['yIndex'],
      labels: ['Index Points'],
      ymax: 500,
      barRatio: 0.2,
      xLabelAngle: 45,
      hideHover: 'auto'
    });
}

Upvotes: 3

Views: 13546

Answers (5)

Rahul Bhatia
Rahul Bhatia

Reputation: 46

Simple Add dive like following

<div id="chart"></div>

And add style for above div like 

#chart{
  height:400px;
}

Upvotes: 0

YoungStacker
YoungStacker

Reputation: 308

Try changing the (currently undocumented) xLabelMargin option to a smaller value - it sets the minimum margin between labels on the x-axis. If labels are closer than the margin, then they won't be drawn.

eg:

Morris.Bar({
  // ...
  xLabelMargin: 10
})

https://github.com/morrisjs/morris.js/issues/235

Upvotes: 2

Shadwell
Shadwell

Reputation: 34774

In addition to increasing the height of the element that contains the graph you can also set a padding option on your Morris.Bar to give more room to the labels on the x-axis.

Morris.Bar({
  ...
  padding: 50,
  ...
});

Upvotes: 7

user1240792
user1240792

Reputation: 334

if inside a directive you could use the following:

//in pixels
var heightToAdd = 30;    
var svg = element.find("svg")[0];
svg.height.baseVal.value += heightToAdd;

Upvotes: 0

Faber Andr&#233;s Vergara
Faber Andr&#233;s Vergara

Reputation: 631

The solution that worked for me was to increase the size of the svg tag

$('svg').height(700);

Upvotes: 15

Related Questions