Fix positioning on the xLabels

[chuynadamas]

Hi guys! @liuxuan30 @PhilJay first of all! thanks for always answer my silly questions! and also congratulations for the new release! is very awesome!

In other hand, I justa wanna know if there is a possibility to get the same positioning over the xLabels that we can find on the Android wiki when we are working with group of bars.

I'm using 3.0

I want to success the following look and feel.

As you can see the labels over the xAxis are in the middle of every group. I'm following the same configurations over the group bars but I have the following result.

In this case the positions of the x labels are in the beginning of the group.

• Do you think that i need to do this manually over the x values of every entry or i just missing to setting something?

Thanks in advance.

[danielgindi]

@PhilJay this is definitely something we need to think about :-) It's a common practice to center the labels based on the whole group. So maybe offset the center of the labels by an X value that is equal to half the group minus half a bar?

[PhilJay]

Yes, we should think about that. However, this should already be possible, as the screenshot from the wiki (the one with orange/yellow bars) has been taken from a real example that I created. This is just a modified version of this example: https://github.com/PhilJay/MPAndroidChart/blob/master/MPChartExample/src/com/xxmassdeveloper/mpchartexample/BarChartActivityMultiDataset.java

[chuynadamas]

Hi @PhilJay , @danielgindi

I found that you are using the property centerAxisLabelsEnabled I added to my project and it seems that works for little sets, when I increase the number of the sets the labels begin to misplace the position.

_Small Sets_

_Increasing the Sets_

As you can see, the first labels are ok, but March, April and May are completely misplaced, also if you pay attention you will notice that the set of May doesn't show complete. I'll open another issue to work with this.

Thanks in advance.

[danielgindi]

Does this still happen with master?

[chuynadamas]

I'm on 61d10ba and still happens, please check the images.

With less elements

[danielgindi]

@PhilJay I think this is the last thing we need to take care of before the release. Other stuff is already pretty well tested and many bugs fixed until now.

[PhilJay]

I just tested it on Android once more, using multiple bars and grouping them. I cannot reproduce the issue. Could this be a bug just on iOS or does it work with the latest master code?

I can produce the following result with 4 grouped bars:

XAxis configuration:

    XAxis xAxis = mChart.getXAxis();
    xAxis.setGranularity(1f); // min interval 1f (1 year in this case)
    xAxis.setCenterAxisLabels(true); // center labels over groups
    xAxis.setValueFormatter(new IAxisValueFormatter() {
        @Override
        public String getFormattedValue(float value, AxisBase axis) {
            return String.valueOf((int) value);
        }

        @Override
        public int getDecimalDigits() {
            return 0;
        }
    });

Data configuration:

        float groupSpace = 0.08f;
        float barSpace = 0.03f; // x4 dataset
        float barWidth = 0.2f; // x4 dataset
        // (0.2 + 0.03) * 4 + 0.08 = 1.00 -> interval per "group"

        int startYear = 1980;
        int endYear = 1986;

        ArrayList<BarEntry> yVals1 = new ArrayList<BarEntry>();
        ArrayList<BarEntry> yVals2 = new ArrayList<BarEntry>();
        ArrayList<BarEntry> yVals3 = new ArrayList<BarEntry>();
        ArrayList<BarEntry> yVals4 = new ArrayList<BarEntry>();

        for (int i = startYear; i < endYear; i++) {
            yVals1.add(new BarEntry(i, ...));
            yVals2.add(new BarEntry(i, ...));
            yVals3.add(new BarEntry(i, ...));
            yVals4.add(new BarEntry(i, ...));
        }

        BarDataSet  set1 = new BarDataSet(yVals1, "Company A");
        set1.setColor(Color.rgb(104, 241, 175));
        BarDataSet  set2 = new BarDataSet(yVals2, "Company B");
        set2.setColor(Color.rgb(164, 228, 251));
        BarDataSet  set3 = new BarDataSet(yVals3, "Company C"); 
        set3.setColor(Color.rgb(242, 247, 158));
        BarDataSet set4 = new BarDataSet(yVals4, "Company D");
        set4.setColor(Color.rgb(255, 102, 0));

        BarData data = new BarData(set1, set2, set3, set4);
        data.setValueFormatter(new LargeValueFormatter());
        data.setBarWidth(barWidth);
        mChart.setData(data);

        // restrict x-axis range
        mChart.getXAxis().setAxisMinimum(startYear);
        mChart.getXAxis().setAxisMaximum(endYear);
        mChart.groupBars(startYear, groupSpace, barSpace);
        mChart.invalidate();

Please look for any differences between this setup and the one you are having issues with and let me know. I will investigate iOS as well.

[danielgindi]

You are looking at the bar labels, not at the x-axis labels :-)

[danielgindi]

My mistake! In simple grouped bars it works. Proof is the demo of Multiple Bars.

The problem that is left is with Combined Chart. We are discussing this, and will post a fix.

[danielgindi]

Silly me. centerAxisLabelsEnabled was missing for the xAxis in the Combined Chart demo.

Guys, always check centerAxisLabelsEnabled when wanting centered xAxis labels...

[iad24]

@danielgindi first great charts u got here.

I doing the same thing here - a grouped bar chart with dynamic number of groups. How can I adjust the space between the labels? So it can accommodate as many groups I can put.

[abhilasha25]

lables should show only after a period like :- jan apr jul please help?

[jheimes-silveira]

in my case I found a way to leave it depending on the amount of series;
//Exemple

val n = 4 // numero de series
val groupSpace = calcGroupSpace(n)
val barSpace = calcBarSpace(n)
val barWidth = calcBarWith(n)

private fun calcBarWith(n: Int): Float {
return 20/(23*n +8f)
}

private fun calcBarSpace(n: Int): Float {
return 3/(23*n +8f)
}

private fun calcGroupSpace(n: Int): Float {
return 8/(23*n +8f)
}

[muhammedfayazp]

Hi guys! @liuxuan30 @PhilJay first of all! thanks for always answer my silly questions! and also congratulations for the new release! is very awesome!

In other hand, I justa wanna know if there is a possibility to get the same positioning over the xLabels that we can find on the Android wiki when we are working with group of bars.

I'm using 3.0

I want to success the following look and feel.

As you can see the labels over the xAxis are in the middle of every group. I'm following the same configurations over the group bars but I have the following result.

In this case the positions of the x labels are in the beginning of the group.

• Do you think that i need to do this manually over the x values of every entry or i just missing to setting something?

Thanks in advance.

Is this fixed??

[gurpreetKobe]

Facing the same issue with grouped bar chart. When I have 1 or 2 data sets, labels are centered but when there are 3 data sets, last few labels are not aligned center to the group.