Chartist-js: Chart is Cropped in Firefox

[RadhiFadlillah]

I'm using Chromium 44.0.24 and Firefox 40.0.3 in Linux Mint 17.2.

On Chromium, chart is displayed correctly like this :

But in Firefox, label and bottom of the chart is cropped :

My HTML is like this :

<div class="content">
    <div class="box">
        <div class="box-header">
            <p class="header">Daily Sales</p>
        </div>
        <div id="ct-chart" class="chart"></div>
        <div class="box-footer box-legend">
            <p><i id="legend-income" class="fa fa-square"></i> Income</p>
            <p><i id="legend-capital" class="fa fa-square"></i> Capital</p>
            <p><i id="legend-profit" class="fa fa-square"></i> Profit</p>
        </div>
    </div>
</div>

Javascript :

var labels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'];
var income = [25742, 24176, 15258, 14044, 14762, 17520, 12539, 22712, 20319, 12063, 14068, 8246, 20541, 12735, 18280, 17423, 12071, 10496, 6912, 9391, 12283, 13820, 22869, 7937, 14173, 9738, 10082, 14873, 12841, 6768];
var capital = [16254.715, 15412.763, 9741.414, 8824.078, 9276.232, 11042.787, 8119.397, 14116.888, 12862.216, 7572.455, 9141.24, 5367.299, 12826.632, 8099.858, 11561.422, 11191.344, 7692.961, 6644.227, 4389.582, 6015.917, 7923.305, 8856.643, 14588.642, 5051.441, 9071.414, 6344.426, 6471.769, 9363.205, 8143.329, 4093.242];
var profit = [9486.785, 8762.737, 5516.586, 5219.422, 5485.268, 6476.713, 4419.603, 8594.612, 7456.284, 4490.045, 4926.76, 2878.201, 7713.868, 4634.642, 6718.078, 6231.656, 4378.039, 3851.273, 2522.418, 3374.583, 4359.195, 4963.357, 8279.858, 2885.059, 5101.586, 3393.574, 3609.731, 5509.795, 4697.671, 2674.758];

var series = [{
    className: 'ct-income',
    name: 'income',
    data: income
}, {
    className: 'ct-capital',
    name: 'capital',
    data: capital
}, {
    className: 'ct-profit',
    name: 'profit',
    data: profit
}];

var options = {
    height: 500,
    fullWidth: true,
    lineSmooth: false,
    showArea: false,
    showLine: true,
    showPoint: true,
    axisX: {
        labelOffset: {
            x: -3
        }
    },
    axisY: {
        offset: 0,
        showLabel: false
    },
    chartPadding: {
        top: 8,
        left: 24,
        right: 24,
        bottom: 0
    }
};

new Chartist.Line('#ct-chart', {
    labels: labels,
    series: series,
}, options);

And last, my CSS :

* {
    margin: 0px;
    padding: 0px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    color: #212121;
    font-family:'Roboto', 'sans-serif';
}

 .min-height-100 {
    min-height: 100px;
}

 body, html {
    background-color: #eee;
}

.content {
    padding: 8px;
    max-width: 1028px;
    margin: auto;
    overflow: auto;
}

.box {
    margin: 8px;
    border: 1.5px solid #ddd;
    background-color: #FFF;
    box-shadow: 0px 2px 10px 0px rgba(167, 167, 167, 0.35);
}

 .box-header {
    width: 100%;
    display: table;
}

.box-header .header {
    padding: 16px;
    font-size: 1.1em;
    font-weight: 600;
    display: table-cell;
}

.box-footer {
    padding: 16px;
    display: block;
    font-size: 0.8em;
    font-weight: 500;
    text-align: center;
    border-top: 1.5px solid #ddd;
}

 .chart {
    padding: 16px;
    border-top: 1.5px solid #ddd;
}

.box-legend p {
    display: inline-block;
}

.box-legend p:not(:last-child) {
    margin-right: 24px;
}

.box-legend .fa {
    margin-right: 8px;
}

 #ct-chart .ct-line {
    stroke-width: 3px;
    stroke-linecap: round;
}

#ct-chart .ct-point {
    opacity: 0.5;
    cursor: pointer;
    stroke-width: 12px;

    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

#ct-chart .ct-point:hover {
    opacity: 1;
    stroke-width: 24px;
}

#legend-income, #ct-chart .ct-income .ct-line, #ct-chart .ct-income .ct-point {
    color: #673AB7;
    stroke: #673AB7;
}

#legend-capital, #ct-chart .ct-capital .ct-line, #ct-chart .ct-capital .ct-point {
    color: #2196F3;
    stroke: #2196F3;
}

#legend-profit, #ct-chart .ct-profit .ct-line, #ct-chart .ct-profit .ct-point {
    color: #E91E63;
    stroke: #E91E63;
}

You can see the sample in this fiddle.

[treadmillian]

I have the exact same issue. The last time the graph worked for Firefox was the 0.7.4 release. But the scale wasn't good either.

Firefox 40.0.3 (chartist v0.9.4)

Chrome 44.0.2430.157 (chartist v0.9.4)

[RadhiFadlillah]

I've got it now. I don't know why, but it seems the problem is happened because the padding in div that used as chart container. So, to fix it, I remove the padding in my .chart class :

 .chart {
/*  padding: 16px;                  remove this*/
    border-top: 1.5px solid #ddd;
}

Now it displayed correctly in Firefox and Chromium :

You can see it in this fiddle.

[treadmillian]

The CSS fix doesn't work for me as I have no padding or a .chart class.

What I did do was as the following config option to the chart:


axisY: {
onlyInteger: true,
}


low: -150


And this result in the following, however, the X axis labels still do not show, Any ideas? Complete config options for the chart is :


var options = {
height: 360,
fullWidth: true,
lineSmooth: true,
axisX: {
showGrid: false,
showLabel: true
},
axisY: {
offset: 60,
onlyInteger: true,
labelInterpolationFnc: function(value) {
return value + ' Kg';
}
},
series: {
'Processed Food': {
showArea: true
}
},
low: -150,
fullWidth: true,
chartPadding: {
right: 40,
left: 20
},
plugins: [
Chartist.plugins.tooltip()
]
};


[gionkunz]

@RadhiFadlillah The chart container uses padding to create an intrinsic container. Therefore, you should not apply padding to the container directly. If you need padding you'll need to use an other wrapper around the container.

@treadmillian , I'll investigate this ASAP.

[treadmillian]

@gionkunz Here's 0.7.4 working, however, the option to show only integers for the Y Axis doesn't work.

onlyInteger: true

[gionkunz]

@treadmillian can you reproduce the issue on jsbin? Because looking at the examples here http://gionkunz.github.io/chartist-js/examples.html I can't seem to find an issue like this using FF 39.

[gionkunz]

It's probably related to some styles you're using that are no problem for 0.7.4 but are for 0.9

[treadmillian]

On a lot closer inspection for some reason I had this: ct-chart ct-perfect-fourth

When it should have been this: ct-chart

Checking it more, but can't believe that's what it has ended-up as being the problem.... Sorry!

[celiomesquita]

I have a similar problem, except that the "x" axis is compressed in Firefox. It shows the line type graphic as a vertical line. All labels look good.

[coolbit]

I've just added

.ct-chart-line{
        overflow:visible !important;
}

in the page and the _cropping at the bottom_ problem fixed for me.

[gionkunz]

Closing this issue for now

[ganar]

I want to reopen this issue, because it is still present. When the chart is set in a grid container the @coolbit solution is the only thing that helps to show the entire chart. This is not enough though. The width of chart on the right is wrong (look at the superimposed grid, it should leave empty the middle column.

Upon resizing the window, the chart reduces in size, fitting in the asigned grid position

The chart on the right has the same settings, but it does not get clipped, like the one on the left.
Do note that the amount of clipping seems to coincide with the offset: 120 applied on the axisY which is the same in both cases .

[AcelisWeaven]

Having the same problem with Firefox, however this bug occurs only when I use labelInterpolationFnc.