androidkotlinmpandroidchart

Remove Empty Spaces from the MPAndroidChart Horizontal Chart

I am using MPAndroidChart to create a chart inside my application.

I want to remove all the empty space that is not covered by the graph. As you can see, there are some empty spaces for all 4 sides.

enter image description here

I tried using HorizontalBarChart.setViewPortOffsets(0f, 0f, 0f, 0f) function but it does not seems to be fully working.

Here is my Code.

package com.example.unimarks

import android.graphics.Color
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.github.mikephil.charting.charts.HorizontalBarChart
import com.github.mikephil.charting.charts.PieChart
import com.github.mikephil.charting.components.Legend
import com.github.mikephil.charting.data.BarData
import com.github.mikephil.charting.data.BarDataSet
import com.github.mikephil.charting.data.BarEntry
import com.github.mikephil.charting.data.PieData
import com.github.mikephil.charting.data.PieDataSet
import com.github.mikephil.charting.data.PieEntry
import com.github.mikephil.charting.formatter.PercentFormatter
import com.github.mikephil.charting.utils.ColorTemplate

class SummaryFragment : Fragment() {

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        buildMarkDistributionChart()
        buildCourseProgressChart()
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_summary, container, false)
    }

    private fun buildMarkDistributionChart() {
        // (CODE FOR OTHER GRAPH)
    }
    private fun buildCourseProgressChart() {
        val chart = view?.findViewById<HorizontalBarChart>(R.id.course_progress_chart)
        val chartList : ArrayList<BarEntry> = ArrayList()

        chartList.add(BarEntry(62.5f, 1f))
        val barDataSet = BarDataSet(chartList, null)
        barDataSet.setColors(intArrayOf(Color.rgb(37, 179, 54)), 255)

        val legend : Legend? = chart?.legend
        legend?.isEnabled = false

        barDataSet.valueTextSize = 15f
        barDataSet.valueTextColor = Color.BLACK

        chart?.data = BarData(barDataSet)
        chart?.description?.isEnabled = false;
        chart?.xAxis?.isEnabled = false
        chart?.axisLeft?.isEnabled = false
        chart?.axisRight?.isEnabled = false
        chart?.setTouchEnabled(false)
        chart?.setViewPortOffsets(0f, 0f, 0f, 0f)
        chart?.setBackgroundColor(Color.rgb(233, 233, 233))
        chart?.setPadding(0,0,0,0)

        chart?.animateY(2000)
    }
}
Solution

  • Looking at the Github issue here and the similar question here (whose solutions no longer work) the solution here is to:

    1. Set the bar width to something on the BarData object (width is in chart units)
    2. Set the horizontal axis limits to what you want so it doesn't add left/right margin (keep in mind that the HorizontalBarChart is just a rotated BarChart, so the bar length is still the y parameter, 1.0 in your example)
    3. Set the min offset parameter on the chart to 0 (removes the padding)

    Here is an example based on your code:

    val chartList = listOf(
    BarEntry(62.5f, 1.0f)
)
val barDataSet = BarDataSet(chartList, null)
barDataSet.setColors(
    intArrayOf(Color.rgb(37, 179, 54)),
    255)

chart.legend.isEnabled = false

barDataSet.valueTextSize = 15f
barDataSet.valueTextColor = Color.BLACK
val d = BarData(barDataSet)

// Step 1 - Set the bar width to something so it fills the chart
d.barWidth = 1f

chart.data = d
chart.description.isEnabled = false
chart.xAxis.isEnabled = false

// Step 2 - set the horizontal axis limits
//  (removes extra horizontal space from the default limits)
chart.axisLeft.axisMinimum = 0f
chart.axisLeft.axisMaximum = 2f
chart.axisRight.isEnabled = false
chart.axisLeft.isEnabled = false
chart.setTouchEnabled(false)

// Step 3 - Set the "Min Offset" to 0 on the chart and remove the 
//  manually specified viewPortOffsets
chart.minOffset = 0f
chart.setBackgroundColor(Color.rgb(233, 233, 233))

    And the result bar demo