Allow to customize filled area for LineChart

[ekuleshov]

There is a filled flag in the LineChart configuration to enable filled area from 0 up to Y-axis values.

I need to draw a similar filled chart, but area is not 0-based and has different values for start and end Y values. Just like CandleStickChart but presented as a filled values:

Please advise if LineChart could be extended to support something like that?

[Gary111]

Is the actual issue? As far as I can see, now the library allows you to make a similar plot. You only need to create 3 LineDataSet with different fills (transparent blue, white and blue line with no fill).

[ekuleshov]

Could you please provide an example?

[Gary111]

Sure. You should write something like this:

public class TestChartLineActivity extends AppCompatActivity {

    @Bind(R.id.lineChart)
    LineChart lineChart;

    private final Random random = new Random();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test_chart_line);
        ButterKnife.bind(this);

        lineChart.setDescription("Some description text");
        lineChart.setNoDataTextDescription("Some no data description text");
        lineChart.setDrawGridBackground(false);
        lineChart.setTouchEnabled(true);
        lineChart.setDragEnabled(true);
        lineChart.setPinchZoom(false);
        lineChart.setScaleXEnabled(true);
        lineChart.setScaleYEnabled(false);
        lineChart.getLegend().setEnabled(false);
        lineChart.getAxisLeft().setEnabled(true);
        lineChart.getAxisRight().setEnabled(false);
        lineChart.getAxisLeft().setAxisMaxValue(35f);
        lineChart.getAxisLeft().setAxisMinValue(0f);
        lineChart.getXAxis().setEnabled(true);
        lineChart.setBorderColor(Color.GRAY);
        lineChart.setBackgroundColor(Color.WHITE);
        lineChart.setGridBackgroundColor(Color.GRAY);
        lineChart.animateXY((int) TimeUnit.SECONDS.toMillis(2), (int) TimeUnit.SECONDS.toMillis(2));

        lineChart.setData(getExampleData());
    }

    private LineData getExampleData() {

        ArrayList<String> xVals = new ArrayList<>();
        for (int i = 0; i < 31; i++) {
            xVals.add((i + 1) + ".Jul");
        }

        ArrayList<Entry> transparentBlueYVals = new ArrayList<>();
        for (int i = 0; i < 31; i++) {
            transparentBlueYVals.add(new Entry(generateRandomBetween(20, 30), i));
        }

        LineDataSet transparentBlueLineDataSet = new LineDataSet(transparentBlueYVals, "TRANSPARENT_BLUE");
        transparentBlueLineDataSet.setLineWidth(0);
        transparentBlueLineDataSet.setCircleSize(0);
        transparentBlueLineDataSet.setValueTextSize(0);
        transparentBlueLineDataSet.setDrawCircleHole(false);
        transparentBlueLineDataSet.setDrawFilled(true);
        transparentBlueLineDataSet.setFillAlpha(128);
        transparentBlueLineDataSet.setDrawValues(false);
        transparentBlueLineDataSet.setFillColor(Color.BLUE);
        transparentBlueLineDataSet.setCircleColor(Color.TRANSPARENT);
        transparentBlueLineDataSet.setColor(Color.TRANSPARENT);
        transparentBlueLineDataSet.setHighLightColor(Color.TRANSPARENT);

        ArrayList<Entry> whiteYVals = new ArrayList<>();
        for (int i = 0; i < 31; i++) {
            whiteYVals.add(new Entry(generateRandomBetween(5, 15), i));
        }

        LineDataSet whiteLineDataSet = new LineDataSet(whiteYVals, "WHITE");
        whiteLineDataSet.setLineWidth(0);
        whiteLineDataSet.setCircleSize(0);
        whiteLineDataSet.setValueTextSize(0);
        whiteLineDataSet.setDrawCircleHole(false);
        whiteLineDataSet.setDrawFilled(true);
        whiteLineDataSet.setFillAlpha(255);
        whiteLineDataSet.setDrawValues(false);
        whiteLineDataSet.setFillColor(Color.WHITE);
        whiteLineDataSet.setCircleColor(Color.TRANSPARENT);
        whiteLineDataSet.setColor(Color.TRANSPARENT);
        whiteLineDataSet.setHighLightColor(Color.TRANSPARENT);

        ArrayList<Entry> noFillYVals = new ArrayList<>();
        for (int i = 0; i < 31; i++) {
            noFillYVals.add(new Entry(generateRandomBetween((int) whiteYVals.get(i).getVal() + 1, (int) transparentBlueYVals.get(i).getVal() - 1), i));
        }

        LineDataSet noFillLineDataSet = new LineDataSet(noFillYVals, "NO_FILL");
        noFillLineDataSet.setLineWidth(2);
        noFillLineDataSet.setCircleSize(4);
        noFillLineDataSet.setValueTextSize(0);
        noFillLineDataSet.setDrawCircleHole(true);
        noFillLineDataSet.setDrawFilled(false);
        noFillLineDataSet.setDrawValues(false);
        noFillLineDataSet.setCircleColor(Color.BLUE);
        noFillLineDataSet.setCircleColorHole(Color.WHITE);
        noFillLineDataSet.setColor(Color.BLUE);
        noFillLineDataSet.setHighLightColor(Color.TRANSPARENT);

        return new LineData(xVals, Arrays.asList(transparentBlueLineDataSet, whiteLineDataSet, noFillLineDataSet));
    }

    private int generateRandomBetween(int min, int max) {
        return random.nextInt(max - min + 1) + min;
    }

}

And you'll get similar result:

Sorry for ugly code, did it in a hurry

[Chakib-Temal]

when you finish, if you want to draw a new Axis, use this :
Draw custom grid with LimitLine:

private void drawCustomGrid(XAxis xAxis, YAxis yAxis,
                           float xMax, float yMax,
                           int color, float width) {

   if (xAxis.getLimitLines().size() == 0) {

       for (int i = 10; i <= xMax; i += 10) {
           LimitLine limitLine = new LimitLine(i);
           limitLine.setLineWidth(width);
           limitLine.setLineColor(color);
           xAxis.addLimitLine(limitLine);
       }
   }

   if (yAxis.getLimitLines().size() == 0) {

       for (int j = 10; j <= yMax; j += 10) {
           LimitLine limitLine = new LimitLine(j);
           limitLine.setLineWidth(width);
           limitLine.setLineColor(color);
           yAxis.addLimitLine(limitLine);
       }
   }
}