Morris.JS X-Axis Label Height

Question

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

Simoniac

Answer 1

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

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

Wandering

Answer 2

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

Yaya

thank you, spent a lot of time to find way how to remove spaces when axes disable. You design solved my problem! – Horned

Answer 3

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

Liguria

Answer 4

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;

Dactyl

Answer 5

Simple Add dive like following

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

And add style for above div like

#chart{
  height:400px;
}

Checkpoint