How to create horizontal Scrollable Grouped BarChart in andorid

Question

I need to crate this type of horizontal Scrollable Grouped BarChart

below are some links that i have tried so far

• How to create a BarChart with grouped bars with MPAndroidChart?
• MPAndroid Chart not displaying any labels for xAxis , what is missing?
• Scrollable BarChart with possibility to touch each bar using MpAndroidChart?
• MPAndroidChart BarChart horizontal / vertical
• How can I make my HorizontalBarChart scrollable?

Here is the code that i have tried so far but i don't know how create exact same Grouped BarChart as above image and make it horizontal Scrollable

class ChartFragment : BaseFragment() {

    var barEntries: ArrayList<BarEntry> = ArrayList()
    var barEntries1: ArrayList<BarEntry> = ArrayList()
    var barEntries2: ArrayList<BarEntry> = ArrayList()
    var barEntries3: ArrayList<BarEntry> = ArrayList()
    var barEntries4: ArrayList<BarEntry> = ArrayList()

    val xAxisLabel: ArrayList<String> = ArrayList()

    lateinit var rootView: View
    override fun onCreateView(
            inflater: LayoutInflater, container: ViewGroup?,
            savedInstanceState: Bundle?
    ): View? {
        rootView = inflater.inflate(R.layout.fragment_insigts, container, false)

        val description = Description()
        description.text = ""
        rootView.barChart.description = description

        getEntries()

        rootView.barChart.axisLeft.setDrawGridLines(false)
        rootView.barChart.xAxis.setDrawGridLines(false)
        rootView.barChart.axisLeft.setDrawAxisLine(false)


        rootView.barChart.axisRight.setDrawGridLines(false)
        rootView.barChart.axisLeft.setDrawGridLines(false)
        rootView.barChart.xAxis.setDrawGridLines(false)


//        rootView.barChart.xAxis.isEnabled = false
        rootView.barChart.axisLeft.isEnabled = false
        rootView.barChart.axisRight.isEnabled = false

        xAxisLabel.add("Mon")
        xAxisLabel.add("Tue")
        xAxisLabel.add("Wed")
        xAxisLabel.add("Thu")
        xAxisLabel.add("Fri")
        xAxisLabel.add("Sat")
        xAxisLabel.add("Sun")

        val xAxis = rootView.barChart.xAxis

        xAxis.valueFormatter = IndexAxisValueFormatter(xAxisLabel)


        rootView.barChart.setVisibleXRangeMaximum(20f)
        rootView.barChart.moveViewToX(10f)

        return rootView
    }



    private fun getEntries() {

        barEntries.add(BarEntry(1f, 70f))
        barEntries.add(BarEntry(2f, 80f))


        barEntries1.add(BarEntry(1f, 50f))
        barEntries1.add(BarEntry(2f, 40f))


        barEntries2.add(BarEntry(1f, 200f))
        barEntries2.add(BarEntry(2f, 30f))


        barEntries3.add(BarEntry(1f, 60f))
        barEntries3.add(BarEntry(2f, 30f))

        barEntries4.add(BarEntry(1f, 70f))
        barEntries4.add(BarEntry(2f, 80f))



        val barDataSet = BarDataSet(barEntries, "1")
        barDataSet.color = Color.parseColor("#F44336")

        val barDataSet1 = BarDataSet(barEntries1, "2")
        barDataSet1.setColors(Color.parseColor("#9C27B0"))

        val barDataSet2 = BarDataSet(barEntries2, "3")
        barDataSet1.setColors(Color.parseColor("#e241f4"))

        val barDataSet3 = BarDataSet(barEntries3, "4")
        barDataSet1.setColors(Color.parseColor("#42f46e"))

        val barDataSet4 = BarDataSet(barEntries4, "5")
        barDataSet1.setColors(Color.parseColor("#42f4ee"))

        val months = arrayOf("TYPE 1", "TYPE 2","TYPE 3","TYPE 4","TYPE 5")
        val data = BarData(barDataSet, barDataSet1, barDataSet2, barDataSet3,barDataSet4)
//        val data = BarData(barDataSet, barDataSet1)
        rootView.barChart.data = data

        val xAxis = rootView.barChart.xAxis
        xAxis.valueFormatter = IndexAxisValueFormatter(months)
        rootView.barChart?.axisLeft?.axisMinimum = 0F
        xAxis.position = XAxis.XAxisPosition.BOTTOM
        xAxis.granularity = 1f
        xAxis.setCenterAxisLabels(true)
        xAxis.isGranularityEnabled = true

        val groupSpace = 0.06f
        val barSpace = 0.02f // x2 dataset
        val barWidth = 0.45f

        //IMPORTANT *****
        data.barWidth = 0.15f
        rootView.barChart?.xAxis?.axisMinimum = 0F
//        rootView.barChart?.xAxis!!.axisMaximum = 0 + rootView.barChart.barData.getGroupWidth(groupSpace, barSpace) * groupCount
        rootView.barChart?.groupBars(0f, groupSpace, barSpace) // perform the "explicit" grouping

    }

}

Can anybody help me create this type of horizontal Scrollable Grouped BarChart

If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.

Answer 1

Finally i solved my problem

SAMPLE CODE

import android.graphics.Color
import android.os.Bundle
import android.text.SpannableString
import android.text.SpannableStringBuilder
import android.text.style.RelativeSizeSpan
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.github.mikephil.charting.charts.BarChart
import com.github.mikephil.charting.components.XAxis
import com.github.mikephil.charting.data.BarData
import com.github.mikephil.charting.data.BarDataSet
import com.github.mikephil.charting.data.BarEntry
import kotlinx.android.synthetic.main.fragment_chart.view.*
import com.github.mikephil.charting.interfaces.datasets.IBarDataSet
import com.github.mikephil.charting.components.YAxis
import com.github.mikephil.charting.formatter.IndexAxisValueFormatter


/**
 * A simple [Fragment] subclass.
 *
 */
class ChartFragment : BaseFragment() {

    lateinit var mChart: BarChart
    lateinit var rootView: View

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        rootView = inflater.inflate(R.layout.fragment_insigts, container, false)

        rootView.tvInflow.text = changeTextSizeOfAvailableBalance("198.12")
        rootView.tvOutFlow.text = changeTextSizeOfAvailableBalance("198.12")


        mChart = rootView.barChart
        getEntries()

        return rootView
    }

    private fun changeTextSizeOfAvailableBalance(price: String): SpannableStringBuilder {
        val spannableStringBuilder = SpannableStringBuilder("N")
        val spannable = SpannableString(price)
        spannable.setSpan(RelativeSizeSpan(2f), 0, spannable.length, 0)
        spannableStringBuilder.append(spannable)
        return spannableStringBuilder
    }

    private fun getEntries() {
        mChart.setDrawBarShadow(false)
        mChart.description.isEnabled = false
        mChart.setPinchZoom(false)
        mChart.setDrawGridBackground(false)

        val labels = arrayOf("", "JAN", "FEB", "MAR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC", "")

        val xAxis = mChart.xAxis
        xAxis.setCenterAxisLabels(true)
        xAxis.position = XAxis.XAxisPosition.BOTTOM
        xAxis.setDrawGridLines(false)
        xAxis.granularity = 1f // only intervals of 1 day
        xAxis.textColor = Color.BLACK
        xAxis.textSize = 11f
        xAxis.axisLineColor = Color.WHITE
        xAxis.axisMinimum = 1f
        xAxis.valueFormatter = IndexAxisValueFormatter(labels)
        xAxis.position = XAxis.XAxisPosition.TOP

        val leftAxis = mChart.axisLeft
        leftAxis.textColor = Color.BLACK
        leftAxis.textSize = 12f
        leftAxis.axisLineColor = Color.WHITE
        leftAxis.setDrawGridLines(false)
        leftAxis.granularity = 2f
        leftAxis.setLabelCount(8, true)
        leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART)

        mChart.axisRight.isEnabled = false
        mChart.legend.isEnabled = false

        val valOne = floatArrayOf(10f, 20f, 44f, 40f, 50f, 50f, 52f, 30f, 40f, 50f, 40f, 30f)
        val valTwo = floatArrayOf(20f, 10f, 50f, 30f, 52f, 52f, 50f, 40f, 30f, 40f, 30f, 30f)

        val barOne = ArrayList<BarEntry>()
        val barTwo = ArrayList<BarEntry>()

        for (i in 0 until valOne.size) {
            barOne.add(BarEntry(i.toFloat(), valOne[i]))
            barTwo.add(BarEntry(i.toFloat(), valTwo[i]))
        }

        val set1 = BarDataSet(barOne, "barOne")
        set1.color = Color.GRAY
        val set2 = BarDataSet(barTwo, "barTwo")
        set2.color = Color.BLUE


        set1.isHighlightEnabled = false
        set2.isHighlightEnabled = false
        set1.setDrawValues(false)
        set2.setDrawValues(false)

        mChart.axisLeft.setDrawLabels(false)
        mChart.axisRight.setDrawLabels(false)

        val dataSets = ArrayList<IBarDataSet>()
        dataSets.add(set1)
        dataSets.add(set2)
        val data = BarData(dataSets)
        val groupSpace = 0.4f
        val barSpace = 0f
        val barWidth = 0.3f
        data.barWidth = barWidth
        xAxis.axisMaximum = labels.size - 1.1f
        mChart.data = data
        mChart.setScaleEnabled(false)
        mChart.setVisibleXRangeMaximum(4f)
        mChart.groupBars(1f, groupSpace, barSpace)
        mChart.invalidate()
    }


}

OUTPUT