Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IndexAxisValueFormatter not working as expected

I'm using the MPAndroidChart to create a bar chart. My configurations:

<string-array name="months_initials">
       <item>J</item>
       <item>F</item>
       <item>M</item>
       <item>A</item>
       <item>M</item>
       <item>J</item>
       <item>J</item>
       <item>A</item>
       <item>S</item>
       <item>O</item>
       <item>N</item>
       <item>D</item>
   </string-array>

...

String[] months = getResources().getStringArray(R.array.months_initials);
chart.getXAxis().setCenterAxisLabels(true);
chart.getXAxis().setLabelCount(months.length, true);
chart.getXAxis().setValueFormatter(new IndexAxisValueFormatter(months) {
    @Override
    public String getFormattedValue(float value, AxisBase axis) {
        Timber.i("index = %s", value);
        return super.getFormattedValue(value, axis);
    }
});

index = 0.5
index = 1.5909091
index = 2.6818182
index = 3.7727275
index = 4.8636365
index = 5.9545455
index = 7.0454545
index = 8.136364
index = 9.227273
index = 10.318182
index = 11.409091

And this is the result:
enter image description here

Now, if I change it to: return super.getFormattedValue(value-0.5f, axis);

The result is:
enter image description here

Again, if I add another change: chart.getXAxis().setLabelCount(Integer.MAX_VALUE, true);

index = 0.5
index = 1.0
index = 1.5
index = 2.0
index = 2.5
index = 3.0
index = 3.5
index = 4.0
index = 4.5
index = 5.0
index = 5.5
index = 6.0
index = 6.5
index = 7.0
index = 7.5
index = 8.0
index = 8.5
index = 9.0
index = 9.5
index = 10.0
index = 10.5
index = 11.0
index = 11.5
index = 12.0
index = 12.5

The result is:
enter image description here

A bit "hammer time" but it would work for me, unfortunately the labels are not correctly centered. So, what's happening here, what am I missing? How can I achieve my final result?

Thanks for your time.

ps: opened an issue too.

EDIT full setup code:

    String[] months = getResources().getStringArray(R.array.months_initials);
    BarChart chart = binding.barChart;

    chart.setTouchEnabled(false);
    chart.getDescription().setEnabled(false);
    chart.getLegend().setEnabled(false);
    chart.getAxisLeft().setEnabled(false);
    chart.getAxisRight().setEnabled(false);
    chart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);
    chart.getXAxis().setDrawAxisLine(false);
    chart.getXAxis().setDrawGridLines(false);
    chart.getXAxis().setCenterAxisLabels(true);
    chart.getXAxis().setLabelCount(Integer.MAX_VALUE, true);
    chart.getXAxis().setValueFormatter(new IndexAxisValueFormatter(months) {
        @Override
        public String getFormattedValue(float value, AxisBase axis) {
            Timber.i("index = %s", value);
            return super.getFormattedValue(value - 0.5f, axis);
        }
    });
    chart.getXAxis().setTextColor(ContextCompat.getColor(this, R.color.grey));
    chart.getXAxis().setTextSize(12);

    BarDataSet barData = new BarDataSet(data, "data");
    barData.setColor(ContextCompat.getColor(this, R.color.chart_bar));
    barData.setDrawValues(false);

    ArrayList<IBarDataSet> dataSets = new ArrayList<>();
    dataSets.add(barData);
    binding.barChart.setData(new BarData(dataSets));
    binding.barChart.animateY(1000, Easing.EasingOption.Linear);
like image 366
GuilhE Avatar asked Sep 13 '25 12:09

GuilhE


2 Answers

I can't exactly pin point the issue in your code but it is probably something do with the granularity of the chart. But here's a rough working example. Hope this helps!

        String[] months = {"Jan", "Feb", "Mar", "Apr", "May", "Jun"};

        BarChart mChart = (BarChart) findViewById(R.id.barChart);
        mChart.setDrawBarShadow(false);
        mChart.setDrawValueAboveBar(false);
        mChart.getDescription().setEnabled(false);
        mChart.setDrawGridBackground(false);

        XAxis xaxis = mChart.getXAxis();
        xaxis.setDrawGridLines(false);
        xaxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xaxis.setGranularity(1f);
        xaxis.setDrawLabels(true);
        xaxis.setDrawAxisLine(false);
        xaxis.setValueFormatter(new IndexAxisValueFormatter(months));

        YAxis yAxisLeft = mChart.getAxisLeft();
        yAxisLeft.setPosition(YAxis.YAxisLabelPosition.INSIDE_CHART);
        yAxisLeft.setDrawGridLines(false);
        yAxisLeft.setDrawAxisLine(false);
        yAxisLeft.setEnabled(false);

        mChart.getAxisRight().setEnabled(false);

        Legend legend = mChart.getLegend();
        legend.setEnabled(false);

        ArrayList<BarEntry> valueSet1 = new ArrayList<BarEntry>();

        for (int i = 0; i < 6; ++i) {
            BarEntry entry = new BarEntry(i, (i+1)*10);
            valueSet1.add(entry);
        }

        List<IBarDataSet> dataSets = new ArrayList<>();
        BarDataSet barDataSet = new BarDataSet(valueSet1, " ");
        barDataSet.setColor(Color.CYAN);
        barDataSet.setDrawValues(false);
        dataSets.add(barDataSet);

        BarData data = new BarData(dataSets);
        mChart.setData(data);
        mChart.invalidate();

RESULT

enter image description here

like image 192
sauvik Avatar answered Sep 15 '25 02:09

sauvik


I had same issue and resolved by doing this :

barChart.getXAxis().setLabelCount(barDataSet.getEntryCount());

Moreover if you are using only one dataset then instead of this:

ArrayList<IBarDataSet> dataSets = new ArrayList<>();
dataSets.add(barData);

Use:

BarDataSet barDataSet = new BarDataSet(yourValauesHere, "Legend Text here");

For reference please follow example below:

    barEntries = new ArrayList<BarEntry>();

    barEntries.add(new BarEntry(0, 1));
    barEntries.add(new BarEntry(1, 2));
    barEntries.add(new BarEntry(2, 4));
    barEntries.add(new BarEntry(3, 6));
    barEntries.add(new BarEntry(4, 5));
    barEntries.add(new BarEntry(5, 7));

    barDataSet = new BarDataSet(barEntries, "Contracts");
    barDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
    barDataSet.setColor(getColor("defaultYellow"));
    barDataSet.setHighlightEnabled(true);
    barDataSet.setHighLightColor(Color.RED);
    barDataSet.setValueTextSize(defaultValueTextSize);
    barDataSet.setValueTextColor(getColor("primaryDark"));

    BarData barData = new BarData(barDataSet);

    barChart.getDescription().setText("No. of Contracts signed in 6 
    months");
    barChart.getDescription().setTextSize(12);
    barChart.getAxisLeft().setAxisMinimum(0);
    barChart.getXAxis().setPosition(XAxis.XAxisPosition.BOTH_SIDED);
    barChart.getXAxis().setValueFormatter(new 
    IndexAxisValueFormatter(getXAxisValues()));
    barChart.animateY(1000);
    barChart.setData(barData);

Getting xAxis values method:

private ArrayList<String> getXAxisValues()
{
    ArrayList<String> labels = new ArrayList<String> ();

    labels.add( "JAN");
    labels.add( "FEB");
    labels.add( "MAR");
    labels.add( "APR");
    labels.add( "MAY");
    labels.add( "JUN");
    return labels;
}
like image 21
Muhammad Saad Rafique Avatar answered Sep 15 '25 01:09

Muhammad Saad Rafique