Charts: Fill area between two line in Line chart

Created on 13 May 2016  路  10Comments  路  Source: danielgindi/Charts

screen shot 2016-05-13 at 4 09 53 pm

As you can see Two LineChartDataSet with the Gradient fill
Now i want to fill area between Two line .

Workaround i have tried so far

  1. setting the chartDataSet2.drawFilledEnabled = false in below line but not working the Gradient is still display in below line.
  2. Setting a white fill color in below line :D , Hard luck not working the below area still display with color.

Let me know if its possible or not or i have to customize my self.

Most helpful comment

I am using setFillFormatter, but it's not helping me and, setfillColor() crosses the second line as there is no way to stop the first line at Y values of the second line.
I want to implement something like this:

    `dataSet.setFillFormatter(new IFillFormatter() {
        @Override
        public float getFillLinePosition(ILineDataSet dataSet, LineDataProvider dataProvider) {
            return //return Y value of the second line for current X of line being filled;
        }
    });`

Is there any way to find the Y value of the second line for each X of first line? I see both dataSet and dataProvider returns fixed values for each call of getFillLinePosition.

All 10 comments

Well I just met the same task recently.
drawFilledEnabled is just filling the whole rect between the line and the fillMin(usually bottom line or 0 line), so if the color is not solid, it will have overlay.

So there are two options:

  1. write a new algorithm to calculate the closed path between two lines, seems the ultimate solution;
  2. use white fill color for the lower line, which requires the fillcolor not transparent. Note, the higher line should be rendered first, not the reverse order.

Ok second option i have already tried with the high on first and below in second.
Regarding closest path its bit more tricky, in case of user zoom drag etc and may below line gone up from top line the also be the case so in that case higher line become lower and vica versa
Any chance to be done in master Repo?

I write a small sort to make sure the higher line always renders first. If in your case, use can change the order, the higher line will cover the lower line, we can't avoid that.

i am not in hurry with this request but I hope this is good part for this lib, just for curiosity is there any chance of Android lib have implemented same kind of functionality so that we can get help from that ?

The functionality in Android and Swift are the same. That's the point of a cross-platform library

@danielgindi yes mate I totally agree with your point my purpose to point out the Android lib is to know whether somebody have same kind of request or not.

did u find any logic for this?? If so please post it

@BhargaviSridharan Nope

Please see the Filled Line Chart demo on v3 branch

I am using setFillFormatter, but it's not helping me and, setfillColor() crosses the second line as there is no way to stop the first line at Y values of the second line.
I want to implement something like this:

    `dataSet.setFillFormatter(new IFillFormatter() {
        @Override
        public float getFillLinePosition(ILineDataSet dataSet, LineDataProvider dataProvider) {
            return //return Y value of the second line for current X of line being filled;
        }
    });`

Is there any way to find the Y value of the second line for each X of first line? I see both dataSet and dataProvider returns fixed values for each call of getFillLinePosition.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

guanyanlin picture guanyanlin  路  3Comments

coop44483 picture coop44483  路  3Comments

JW00332 picture JW00332  路  4Comments

PrashantKT picture PrashantKT  路  3Comments

Bharati555 picture Bharati555  路  4Comments