MPAndroidChart fill color gradient

Question

Is it possible with MPAndroidChart (or any other Android chart library) to fill the chart under the draw line with a gradient color? Something like this:

set1.setFillColor(getResources().getColor(R.drawable.chart_fill));

then in chart_fill.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:angle="90"
        android:endColor="#FF207a54"
        android:startColor="#FFffffff" />

</shape>

Any update on this? Did MPAndroidChart include the gradient fill color feature in any of the newer versions? — VladimirVip, Feb 07 '17 at 21:44

score 45 · Answer 1 · edited Jun 20 '20 at 09:12

45

You can use the following two methods:

LineRadarDataSet#setDrawFilled(boolean isFilled); 
LineRadarDataSet#setFillDrawable(Drawable d);

Here's a link to the javadoc for that class.

This is the example from the ~~MPAndroidChart sample project:~~

set1.setDrawFilled(true);
if (Utils.getSDKInt() >= 18) {
    // fill drawable only supported on api level 18 and above
    Drawable drawable = ContextCompat.getDrawable(this, R.drawable.fade_red);
    set1.setFillDrawable(drawable);
}
else {
    set1.setFillColor(Color.BLACK);
}

In fade_red.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:startColor="#00ff0000"
        android:endColor="#ffff0000" />
</shape>

Here's a sample of what it looks like on a LineChart:

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 12 '17 at 23:37

David Rawson

20,912
7
88
124

2

How to fill, depend on positive or negative values, with different colors ? – hannes ach Apr 25 '18 at 06:28
2

You should also add set1.setDrawFilled(true); for the fill to show up. Hope this helps someone out there. – Neri May 28 '18 at 14:40
how to remove this dotted line? – Waqar Vicky Jan 02 '20 at 13:18
This should be an accepted answer. – Rabindra Khadka Jan 14 '22 at 10:47

score 10 · Answer 2 · answered May 13 '20 at 07:28

Kotlin Solution:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR2) {
    lineDataSet.setDrawFilled(true)
    val fillGradient = ContextCompat.getDrawable(requireContext(), R.drawable.red_gradient)
    lineDataSet.fillDrawable = fillGradient
}

Here is the red_gradient.xml file:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:startColor="#00F81616"
        android:endColor="#ffF81616" />
</shape>

score 5 · Accepted Answer · answered Oct 05 '15 at 06:35

Okay i have found a solution:

William Chart and i am using this method:

int[] colors = { getResources().getColor(R.color.menu_text),
 getResources().getColor(android.R.color.white) };

float[] index = { 0, 1 };
dataset.setGradientFill(colors, index);

MPAndroidChart fill color gradient

3 Answers3

Linked