In Morris.js Bar chart all labels are not showing properly

But in big screen it shows all labels properly.It has 12 labels but it's not showing all labels.

Morris.Bar({
        element: 'morris-bar-chart',
        barGap:4,
        barSizeRatio:0.55,
        data: [

            <?php for($i=0;$i<12;$i++)
            {
                echo "{y: '";
                echo $barchart1[$i]->month;
                echo "', a: ";
                echo $barchart1[$i]->totalamount; 
                echo ", b:";
                echo ($barchart2[$i]->totalamount) ? $barchart2[$i]->totalamount : "0";
                echo "}";

                if($i!=11)
                {
                  echo ",\n";
                }
            }
                ?>
           ],
        xkey: 'y',
        ykeys: ['a', 'b'],
        labels: ['Invoice Amount', 'Received Amount'],
        barColors: ['#55ce63', '#03a9f3'],
        hideHover: 'auto',
        gridLineColor: '#eef0f2',
        resize: true
    });

In Morris.js Bar chart all labels are not showing properly

But in big screen it shows all labels properly.It has 12 labels but it's not showing all labels.

Morris.Bar({
        element: 'morris-bar-chart',
        barGap:4,
        barSizeRatio:0.55,
        data: [

            <?php for($i=0;$i<12;$i++)
            {
                echo "{y: '";
                echo $barchart1[$i]->month;
                echo "', a: ";
                echo $barchart1[$i]->totalamount; 
                echo ", b:";
                echo ($barchart2[$i]->totalamount) ? $barchart2[$i]->totalamount : "0";
                echo "}";

                if($i!=11)
                {
                  echo ",\n";
                }
            }
                ?>
           ],
        xkey: 'y',
        ykeys: ['a', 'b'],
        labels: ['Invoice Amount', 'Received Amount'],
        barColors: ['#55ce63', '#03a9f3'],
        hideHover: 'auto',
        gridLineColor: '#eef0f2',
        resize: true
    });

• javascript
• morris.js

1 Answer 1

This is because Morris chart applies by default a left and right margin to labels on X-axis. This is to avoid that labels are too close to each other. You can change it through the option xLabelMargin (default value is 50, you can try with 10 per example).