Create modern multi barch chart using MPAndroidChart in android

  android, kotlin, mpandroidchart

I’m creating multi bar chart using MPAndroidChart library for android, but it’s not as per our design requirement,
I can able to create like following image using following code

    barChart.description.isEnabled = false
    barChart.setPinchZoom(false)
    barChart.setDrawBarShadow(false)
    barChart.setDrawGridBackground(false)

    val mv = MyMarkerView(context, R.layout.view_marker)
    mv.chartView = barChart
    barChart.marker = mv

    val l: Legend = barChart.legend
    l.isEnabled = false

    barChart.setExtraOffsets(5f, 5f, 5f, 15f)

    val xAxis: XAxis = barChart.xAxis
    xAxis.granularity = 1f
    xAxis.setCenterAxisLabels(true)
    xAxis.position = XAxis.XAxisPosition.BOTTOM

    val leftAxis: YAxis = barChart.axisLeft
    leftAxis.valueFormatter = MyYAxisValueFormatter(barChart)
    leftAxis.setDrawGridLines(false)
    leftAxis.spaceTop = 35f
    leftAxis.axisMinimum = 0f

    barChart.axisRight.isEnabled = false

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

and set data for bar char as per code below

    val values1 = ArrayList<BarEntry>()
    val values2 = ArrayList<BarEntry>()

    for ((index, value) in dataList.withIndex()) {
        values1.add(BarEntry((index).toFloat(), value.y1.toFloat()))
        values2.add(BarEntry((index).toFloat(), value.y2.toFloat()))
    }

    Log.d("data", "sales: ${values1.size} / purchase: ${values2.size}")


    val set1 = BarDataSet(values1, "Sales")
    val set2 = BarDataSet(values2, "Purchase")

    set1.color = colorSales
    set2.color = colorPurchase

    val data = BarData(set1, set2)
    data.setValueFormatter(LargeValueFormatter())
    data.setDrawValues(false)

    barChart.data = data

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

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

    val barSpace = 0.1f
    val groupSpace = 0.3f
    val groupCount = 12

    data.barWidth = 0.2f
    barChart.xAxis.axisMinimum = 0f
    barChart.xAxis.axisMaximum = 0 + barChart.barData.getGroupWidth(groupSpace, barSpace) * groupCount
    barChart.xAxis.xOffset = -10f
    barChart.groupBars(0.7f, groupSpace, barSpace) // perform the "explicit" grouping

    barChart.invalidate()

output of above code is chart below

bar chart

but i want graph like below,

bar chart want as output

please help me on this if anyone has experience with using MPAndroidChart

Source: Android Questions

LEAVE A COMMENT