Mpandroidchart: CombinedChart with Line and BarChartData cuts the first and last bars in half

Created on 30 Dec 2016  路  10Comments  路  Source: PhilJay/MPAndroidChart

Everything works fine apart from the fact that the first and last bars are cut in half, this might be something that is expected, if so, how can I disable it?
I'm used latest version 3.0.1 with line and bar data.
Here's how it looks:
device 2016 12 30 162004

Most helpful comment

@MadhuriHR Please add below before mChart.setData(data);

mChart.getXAxis().setAxisMinimum(-data.getBarData().getBarWidth()/2);
mChart.getXAxis().setAxisMaximum(xVals.size()-data.getBarData().getBarWidth()/2);

All 10 comments

I've had this issue as well, you can try doing something like this, assuming your x values are evenly distributed (e.g xValues = [0, 1, 2, 3 ..., n]):

final float minXValue = ...; // the actual min X value of the dataset 
final float maxXValue = ...; // the actual max X value of the dataset 
getXAxis().setAxisMinimum(minXValue - 0.5f);
getXAxis().setAxisMaximum(maxXValue + 0.5f);

I don't have my solution in front of me atm, but I'm pretty sure that solved it for me.

I had the same experience. Posted my solution on the issue I opened #2553

Hi. How did you combine bar and line graph? I tried using the CombinedChartActivity, but I am unable to do that.

@MadhuriHR can post your code ?

OnCreate() code

mChart = (CombinedChart) findViewById(R.id.chart1);
mChart.getDescription().setEnabled(false);
mChart.setBackgroundColor(Color.WHITE);
mChart.setDrawGridBackground(false);
mChart.setDrawBarShadow(false);
mChart.setHighlightFullBarEnabled(false);

    // draw bars behind lines
    mChart.setDrawOrder(new DrawOrder[]{
            DrawOrder.BAR/*, DrawOrder.BUBBLE, DrawOrder.CANDLE*/, DrawOrder.LINE/*, DrawOrder.SCATTER*/
    });

    Legend l = mChart.getLegend();
    l.setWordWrapEnabled(true);
    l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
    l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
    l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
    l.setDrawInside(false);

    YAxis rightAxis = mChart.getAxisRight();
    rightAxis.setDrawGridLines(false);
    rightAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)

    YAxis leftAxis = mChart.getAxisLeft();
    leftAxis.setDrawGridLines(false);
    leftAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)

    XAxis xAxis = mChart.getXAxis();
    xAxis.setPosition(XAxisPosition.BOTH_SIDED);
    xAxis.setAxisMinimum(0f);
    xAxis.setGranularity(1f);
    xAxis.setValueFormatter(new IAxisValueFormatter() {
        @Override
        public String getFormattedValue(float value, AxisBase axis) {
            return mMonths[(int) value % mMonths.length];
        }
    });

    CombinedData data = new CombinedData();

    data.setData(generateLineData());
    data.setData(generateBarData());
  //  data.setData(generateBubbleData());
  //  data.setData(generateScatterData());
  //  data.setData(generateCandleData());
   // data.setValueTypeface(mTfLight);

    xAxis.setAxisMaximum(data.getXMax() + 0.25f);

    mChart.setData(data);
    mChart.invalidate();

Get bar data method and get line data method

private LineData generateLineData() {

    LineData d = new LineData();

    ArrayList<Entry> entries = new ArrayList<Entry>();

    for (int index = 0; index < itemcount; index++)
        entries.add(new Entry(index + 0.5f, getRandom(15, 5)));

    LineDataSet set = new LineDataSet(entries, "Line DataSet");
    set.setColor(Color.rgb(240, 238, 70));
    set.setLineWidth(2.5f);
    set.setCircleColor(Color.rgb(240, 238, 70));
    set.setCircleRadius(5f);
    set.setFillColor(Color.rgb(240, 238, 70));
    set.setMode(LineDataSet.Mode.CUBIC_BEZIER);
    set.setDrawValues(true);
    set.setValueTextSize(10f);
    set.setValueTextColor(Color.rgb(240, 238, 70));

    set.setAxisDependency(YAxis.AxisDependency.LEFT);
    d.addDataSet(set);

    return d;
}

private BarData generateBarData() {

    ArrayList<BarEntry> entries1 = new ArrayList<BarEntry>();
    ArrayList<BarEntry> entries2 = new ArrayList<BarEntry>();

    for (int index = 0; index < itemcount; index++) {
        entries1.add(new BarEntry(0, getRandom(25, 25)));

        // stacked
        entries2.add(new BarEntry(0, new float[]{getRandom(13, 12), getRandom(13, 12)}));
    }

    BarDataSet set1 = new BarDataSet(entries1, "Bar 1");
    set1.setColor(Color.rgb(60, 220, 78));
    set1.setValueTextColor(Color.rgb(60, 220, 78));
    set1.setValueTextSize(10f);
    set1.setAxisDependency(YAxis.AxisDependency.LEFT);

//    BarDataSet set2 = new BarDataSet(entries2, "");
 //   set2.setStackLabels(new String[]{"Stack 1", "Stack 2"});
 //   set2.setColors(new int[]{Color.rgb(61, 165, 255), Color.rgb(23, 197, 255)});
   // set2.setValueTextColor(Color.rgb(61, 165, 255));
  //  set2.setValueTextSize(10f);
  //  set2.setAxisDependency(YAxis.AxisDependency.LEFT);

    float groupSpace = 0.06f;
    float barSpace = 0.02f; // x2 dataset
    float barWidth = 0.45f; // x2 dataset
    // (0.45 + 0.02) * 2 + 0.06 = 1.00 -> interval per "group"

    BarData d = new BarData(set1);
    d.setBarWidth(barWidth);

    // make this BarData object grouped
   // d.groupBars(0, groupSpace, barSpace); // start at x = 0

    return d;
}

I have removed other graphs(commented). I am not able to remove stack bar in bar graph. If i remove that I am getting a single bar as stack bar.

@MadhuriHR Please do below changes and check it.

in generateBarData method

for (int index = 0; index < itemcount; index++) {
     entries1.add(new BarEntry(index, getRandom(25, 25)));

     // stacked
     // entries2.add(new BarEntry(0, new float[]{getRandom(13, 12), getRandom(13, 12)}));
}

and check it working fine. check below screenshot.
device-2017-01-11-113043

@sanjay-kakadiya thank you so much. It is working fine. But the first bar is half cut.

I tried this :
final float minXValue = ...; // the actual min X value of the dataset
final float maxXValue = ...; // the actual max X value of the dataset
getXAxis().setAxisMinimum(minXValue - 0.5f);
getXAxis().setAxisMaximum(maxXValue + 0.5f);

But not getting.

@MadhuriHR Please add below before mChart.setData(data);

mChart.getXAxis().setAxisMinimum(-data.getBarData().getBarWidth()/2);
mChart.getXAxis().setAxisMaximum(xVals.size()-data.getBarData().getBarWidth()/2);

Its working. Thank you :)

It workes,thank you

Was this page helpful?
0 / 5 - 0 ratings

Related issues

AndroidJiang picture AndroidJiang  路  3Comments

Nima9Faraji picture Nima9Faraji  路  3Comments

chathudan picture chathudan  路  3Comments

ChenZeFengHi picture ChenZeFengHi  路  3Comments

blotfi picture blotfi  路  3Comments