MpAndroidChart HorizontalBarChart Customize label

Question

I want to add my bar values to the left of the bar and the bar labels to the right of the bar.

Below is the code that initilizes HorizontalBarChart

    HorizontalBarChart mChart = (HorizontalBarChart) findViewById(R.id.chart1);
    mChart.setOnChartValueSelectedListener(this);
    mChart.setDrawBarShadow(false);
    mChart.setDrawValueAboveBar(true);
    mChart.setDescription(strHeading);
    mChart.setMaxVisibleValueCount(60);
    mChart.setPinchZoom(false);
    mChart.setDrawGridBackground(false);
    XAxis xl = mChart.getXAxis();
    xl.setDrawLabels(false);
    YAxis yl = mChart.getAxisLeft();
    yl.setDrawLabels(false);
    YAxis yr = mChart.getAxisRight();
    yr.setTypeface(mTfLight);
    yr.setDrawAxisLine(true);
    yr.setDrawGridLines(false);
    setData(12, 50);
    mChart.setFitBars(true);
    mChart.animateY(2500);
    mChart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM_INSIDE);
    Legend l = mChart.getLegend();
    l.setPosition(Legend.LegendPosition.ABOVE_CHART_LEFT);
    l.setFormSize(8f);
    l.setXEntrySpace(4f);

Below is the method that binds the data, The following code

float barWidth = 9f;
float spaceForBar = 10f;
ArrayList<BarEntry> yVals1 = new ArrayList<BarEntry>();

for (int i=0 ; i< arrayChart.size(); i++){
    ModelChart modelChart = arrayChart.get(i);
    String aString = modelChart.getHeader();
    float space = i * spaceForBar;
    BarEntry eachEntry = new BarEntry(i * spaceForBar, modelChart.getValue() , modelChart.getHeader());
    yVals1.add(eachEntry);
}

if (mChart.getData() != null &&
        mChart.getData().getDataSetCount() > 0) {
    BarDataSet  set1 = (BarDataSet)mChart.getData().getDataSetByIndex(0);
    set1.setValues(yVals1);
    mChart.getData().notifyDataChanged();
    mChart.notifyDataSetChanged();
} else {
    set1 = new BarDataSet(yVals1, "A , B , C");
    ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();
    dataSets.add(set1);
    BarData data = new BarData(dataSets);
    data.setValueTextSize(10f);
    data.setValueTypeface(mTfLight);
    data.setBarWidth(barWidth);
    mChart.setData(data);
}

i checked the library code its not easy but i try my best to explain you. They have HorizontalBarChartRenderer.java which is responsible of rendering your Bar chart and method drawValues does this text rendering. What you can do override this method and somehow override HorizontalBarChart.init which set HorizontalBarChartRenderer and default renderer. — Yasir Ali
does it make sense ? If you have this as library then simply change HorizontalBarChartRe‌nderer.drawValues. — Yasir Ali

TR4Android TR4Android · Accepted Answer · 2016-08-16T21:15:04

Yes, this is definitely possible using the ValueFormatter and AxisValueFormatter interfaces.

Create a formatter that adds the labels to the right of your bars:

public class LabelFormatter implements ValueFormatter {
    @Override
    public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
        // assuming that getHeader() returned the label
        return (String) entry.getData();
    }
}

Create an axis formatter that adds the values to the left of your bars:

public class BarValueFormatter implements AxisValueFormatter {
    private final DataSet mData;

    public BarValueFormatter(DataSet data) {
        mData = data;
    }

    @Override
    public String getFormattedValue(float value, AxisBase axis) {
        return String.valueOf((int) mData.getEntryForXPos(value, DataSet.Rounding.CLOSEST).getY());
    }
}

Set your formatters to the dataset and axis:

set1.setValueFormatter(new LabelFormatter());
mChart.getXAxis().setValueFormatter(new BarValueFormatter(set1));

Note that you need to remove the call to xl.setDrawLabels(false); for the x-axis, so the values are properly rendered.

MpAndroidChart HorizontalBarChart Customize label

1 Answers