Zsolt Boldizsar
Zsolt Boldizsar

Reputation: 2582

MPAndroidChart - CustomValueFormatter renders values out of the Viewport

I've been working with HorizontalBarChart MPAndroidChart a few days ago, and ran into an issue while trying to use a custom ValueFormatter which converts the time from milliseconds into 12h format time. (08:50 AM) But as you can see in the picture below, the value gets clipped...

Screenshot

Is there any possibility to set a padding for the chart on the right for the values to be visible?

Here's the code which configures the chart:

private void initializeChart() {
    // Customize user interaction on chart
    mHorizontalBarChart.setTouchEnabled(false);
    mHorizontalBarChart.setPinchZoom(false);
    mHorizontalBarChart.setDragEnabled(false);
    // Customize chart's standard settings
    mHorizontalBarChart.setDrawGridBackground(false);
    mHorizontalBarChart.setDescription("");
    mHorizontalBarChart.setHighlightEnabled(false);
    mHorizontalBarChart.getLegend().setEnabled(false);
    Paint infoPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    infoPaint.setTextAlign(Paint.Align.CENTER);
    infoPaint.setTextSize(12f);
    mHorizontalBarChart.setPaint(infoPaint, Chart.PAINT_INFO);

    // Customize X axis
    XAxis xAxis = mHorizontalBarChart.getXAxis();
    xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
    xAxis.setTextSize(12f);
    xAxis.setDrawLabels(true);
    xAxis.setDrawAxisLine(false);
    xAxis.setDrawGridLines(false);
    xAxis.setAvoidFirstLastClipping(true);

    // Customize Y axis's
    // Left
    YAxis leftAxis = mHorizontalBarChart.getAxisLeft();
    leftAxis.setDrawLabels(false);
    leftAxis.setDrawAxisLine(false);
    leftAxis.setDrawGridLines(false);
    leftAxis.setDrawTopYLabelEntry(false);
    
    // Right
    YAxis rightAxis = mHorizontalBarChart.getAxisRight();
    rightAxis.setDrawLabels(false);
    rightAxis.setDrawAxisLine(false);
    rightAxis.setDrawGridLines(false);
    rightAxis.setDrawTopYLabelEntry(false);
    
}

And here's the code which populates it:

private void setChartData(float range) {
    String[] daysOfWeek = new String[]{"MO", "TU", "WE", "TH", "FR", "SA", "SU"};
    ArrayList<String> xVals = new ArrayList<String>();
    for (int i = 0; i < daysOfWeek.length; i++) {
        xVals.add(daysOfWeek[i]);
    }

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

    for (int i = 0; i < daysOfWeek.length; i++) {
        float mult = (range + 1);
        float val = (float) (Math.random() * mult);
        yVals1.add(new BarEntry(val, i));
    }

    BarDataSet set1 = new BarDataSet(yVals1, "DataSet");
    set1.setBarSpacePercent(35f);

    ArrayList<BarDataSet> dataSets = new ArrayList<BarDataSet>();
    dataSets.add(set1);

    BarData data = new BarData(xVals, dataSets);
    data.setValueTextSize(10f);
    data.setValueFormatter(new ValueFormatter() {
        @Override
        public String getFormattedValue(float value) {
            return value + "some extra text";
        }
    });

    mHorizontalBarChart.setData(data);
}

Any help is greatly appreciated.

Code is used from the examples provided by @Philipp Jahoda.

EDIT: BASED ON Philipp's answer:

I used setSpaceTop(float percent) to adjust the space for the values of the BarData.

    // Customize Y axis's
    // Left
    YAxis leftAxis = mHorizontalBarChart.getAxisLeft();
    leftAxis.setDrawLabels(false);
    leftAxis.setDrawAxisLine(false);
    leftAxis.setDrawGridLines(false);
    leftAxis.setDrawTopYLabelEntry(false);
    leftAxis.setSpaceTop(20); // use these to adjust space for the BarData values
    // Right
    YAxis rightAxis = mHorizontalBarChart.getAxisRight();
    rightAxis.setDrawLabels(false);
    rightAxis.setDrawAxisLine(false);
    rightAxis.setDrawGridLines(false);
    rightAxis.setDrawTopYLabelEntry(false);
    rightAxis.setSpaceTop(20); // use these to adjust space for the BarData values

Code must be optimized though, this is just a quick test, but these suggestions worth tried out. Thanks again Philipp!

Screenshot result

Upvotes: 2

Views: 1481

Answers (1)

Philipp Jahoda
Philipp Jahoda

Reputation: 51411

Read the documentation of the YAxis.

Focus on the following methods:

  • setAxisMaxValue(...) & setAxisMinValue(...)
  • setSpaceTop(...)
  • setSpaceBottom(...)

With them you can set the range / space of your axis.

Upvotes: 1

Related Questions