Mpandroidchart: [BUG v3.1.0] Stacked Bars are misplaced in wrong positions

Created on 30 May 2017 · 4Comments · Source: PhilJay/MPAndroidChart

I am using v3.1.0 of this library. I am fine with it until I have a chart like this one below:

So I want to get this result, here is my code:

final ArrayList<String> labels = new ArrayList<String>();
        labels.addAll(Utils.getXLabels()); // a list of months

        //-------Estimé-------
        Map<Integer, List<BarEntry>> entriesEstime = new TreeMap<>();

        //for create Grouped Bar chart
        for (Map.Entry<Integer, List<Graphe1>> elt : data.entrySet()) {
            List<BarEntry> entryEstime = new ArrayList<>();
            entriesEstime.put(elt.getKey(), new ArrayList<BarEntry>());
            if (!elt.getValue().isEmpty() && elt.getValue() != null) {
                for (Graphe1 graphe2 : elt.getValue()) {
                    entryEstime.add(new BarEntry(Float.parseFloat(graphe2.getMois()), new float[]{graphe2.getEstime(), graphe2.getRealise()}));
                }
                entriesEstime.get(elt.getKey()).addAll(entryEstime);
            }
        }

        List<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();

        int i = 0;
        //create dataset estime
        for (Map.Entry<Integer, List<BarEntry>> entry : entriesEstime.entrySet()) {
            if (!entry.getValue().isEmpty()) {
                BarDataSet dataSet = new BarDataSet(entry.getValue(), entry.getKey()+"");
                dataSet.setColors(new int[] {Color.rgb(67,67,72), Color.rgb(124,181,236)});
                dataSet.setStackLabels(new String[]{
                        "Estimé", "Réalisé"
                });
                dataSets.add(dataSet);
            }
            i++;
        }

        BarData data = new BarData(dataSets);

        data.setBarWidth(0.45f);
        data.setDrawValues(true);
        //hide legend
        mChart.getLegend().setEnabled(false);

        //delete the right yAxis labels
        mChart.getAxisRight().setDrawLabels(false);
        mChart.getAxisRight().setDrawAxisLine(false);
        mChart.getAxisRight().setEnabled(false);

        //show vertical lines
        mChart.getAxisLeft().setDrawGridLines(true);

        XAxis xAxis = mChart.getXAxis();

        //make the xAxis displayed on the bottom
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setDrawAxisLine(true);
        xAxis.setCenterAxisLabels(true);
        xAxis.setDrawGridLines(true);

        //make the xAxis displayed on the bottom
        xAxis.setGranularity(1f);
        xAxis.setAxisMaximum(labels.size());
        xAxis.setAxisMinimum(0f);
        xAxis.setGranularityEnabled(true);
        xAxis.setValueFormatter(new IndexAxisValueFormatter(labels));
        float groupSpace = 0.06f;
        float barSpace = 0.02f;
        mChart.setData(data);
        mChart.groupBars(0f, groupSpace, barSpace);
        mChart.animateY(5000);

With this code, I have this chart:

The bars are not displayed in their right position, for example the second bar in January must be in March.

Please if anyone can find a solution to this, let me know @PhilJay @danielgindi

Source

ghizoulo

Most helpful comment

I have found the solution: You must choose your group space and bar space and bar width such that:
(number data sets) * (bar space + bar width) + group space = 1.0. See example.

tjiang11 on 21 Jul 2017

👍5 ❤2 🎉2 😄2 😕1

All 4 comments

+1 on this issue, how are the bars supposed to be grouped by X value when groupBars() modifies all the X values? There should be decoupling between the displayed X value and inherent X value.

tjiang11 on 21 Jul 2017

I have found the solution: You must choose your group space and bar space and bar width such that:
(number data sets) * (bar space + bar width) + group space = 1.0. See example.

tjiang11 on 21 Jul 2017

👍5 ❤2 🎉2 😄2 😕1

@tjiang11
Your little explanation solved my problem that I stuck in it for 2 days.