CODEWITHSUNDEEP
javascriptjquerychartsflot
Chris Webb
Chris Webb

Reputation: 796

How can I fill a line chart without forcing the y axis to zero in Flot?

I have a Flot graph setup with the following series config:

{
    series: {
        shadowSize: 0,
        lines: {
            // fill: true,
            fillColor: { colors: [{ opacity: 0 }, { opacity: 0.5 }] }
        }
    }
}

Without fill set to true, I get this result which is the layout I want, which automatically sets the lower bound of the y axis to around the lowest data point value:

enter image description here

If I set fill to true, I get the gradient fill I want, but the y axis shoots down to zero:

enter image description here

Hoping this is just a quick config fix, also open to suggestions on a better title for this question.

Upvotes: 1

Views: 350

Answers (1)

Raidri
Raidri

Reputation: 17550

Change your code to this:

series: {
    shadowSize: 0,
    lines: {
        fill: true,
        zero: false,
        fillColor: { colors: [{ opacity: 0 }, { opacity: 0.5 }] }
    }
}

From the documentation:

Area and bar charts normally start from zero, regardless of the data's range. This is because they convey information through size, and starting from a different value would distort their meaning. In cases where the fill is purely for decorative purposes, however, "zero" allows you to override this behavior. It defaults to true for filled lines and bars; setting it to false tells the series to use the same automatic scaling as an un-filled line.

Upvotes: 1

Related Questions