Search code examples
jquerycssflot

Using Flot with Bootstrap 3 Modal, y-axis misaligned

Does anyone encounter this flot with y-axis mis-align using bootstrap 3 modal? On page it's look perfect:

On page it's look perfect

But when launch using modal, the y-axis labels mis-align:

but not on modal dialog

Even if the page re-size, it still the same. I've tried to change the CSS behavior, but still can't. Is this a bug? I'm using example from http://demo.thedevelovers.com/dashboard/kingadmin-v1.5/charts-statistics.html

Here is the fiddle: https://jsfiddle.net/k06ptyzm/2/

(code omitted)

Solution

  • The problem is that you are rendering the Flot chart in an invisible container element. This leads to errors in the rendering. You can see this in an updated fiddle, where the chart in the modal is rendered after a 5 second delay:

    if ($("#chart-2").length > 0) {
    setTimeout(function() {
        chartYear($("#chart-2"));
    }, 5000);
}
    • When you open the modal before the chart is rendered, all looks fine including the y-axis.
    • When you wait and open the modal after the chart is rendered (like in your original code) the axis is mis-aligned.

    So the solution to your problem would be to render the chart only after the modal is opened.