Issue with non-filling bars in a chart: why are the colors not displaying correctly?

Question

i am facing an issue with a bar chart where the bars are not filling with the assigned colors properly. Instead, they appear as empty. I have tried various methods to set custom colors for the bars, but none seem to work as expected.

private fun showEnergy() {
val list = listOf(
        Triple("23-5-2024", 2010, 4.91),
        Triple("22-5-2024", 960, 13.62),
        Triple("21-5-2024", 5642, 2.0),
        Triple("20-5-2024", 1464, 4.85)
    )
        constraintLayoutStatisticsData.removeAllViews()
        constraintLayoutStatisticsData.addView(energyLayout)
        barChart = constraintLayoutStatisticsData.findViewById(R.id.barChart)
        val maxValue=10000f
        setupBarChart(maxValue)
        val currentDate = Date()
        // Create a list of dates for the last 30 days
        val dates = ArrayList<Date>()
        val calendar = Calendar.getInstance()
        for (i in 0 until 6) {
            calendar.time = currentDate
            calendar.add(Calendar.DAY_OF_MONTH, -i)
            dates.add(calendar.time)
        }
        dates.reverse()
        // Create a list of values, adding 0 for missing dates
        val firstBarEntries = ArrayList<BarEntry>()
        val secondBarEntries = ArrayList<BarEntry>()
        val barWidth = 0.26f
        val groupSpace = 0.32f
        val barSpace = 0.08f
        val dateFormat = SimpleDateFormat("d.M.yy", Locale.getDefault())
        for (date in dates) {
            val formattedDate = dateFormat.format(date)
            val value = list.find { it.first == formattedDate }?.second ?: 0
            firstBarEntries.add(BarEntry(date.time.toFloat()- barWidth / 2, value.toFloat()))
            val value2 = 4000f
            firstBarEntries.add(BarEntry(date.time.toFloat()- barWidth / 2, value2.toFloat()))
        }

        val firstDataSet = BarDataSet(firstBarEntries, "")
        firstDataSet.color=ContextCompat.getColor(constraintLayoutStatisticsData.context, R.color.grey)

        val secondDataSet = BarDataSet(secondBarEntries, "")

        val customColors = mutableListOf<Int>()
        for (i in list.indices) {
            val ratio = list[i].second / 4000f
            val color = when {
                ratio >= 0.85 && ratio <= 1.15 -> ContextCompat.getColor(constraintLayoutStatisticsData.context, R.color.green)
                ratio < 0.85 -> ContextCompat.getColor(constraintLayoutStatisticsData.context, R.color.orange)
                else -> ContextCompat.getColor(constraintLayoutStatisticsData.context, R.color.red)
            }
            customColors.add(color)
        }
        firstDataSet.setDrawValues(false)
        secondDataSet.setDrawValues(false)
        secondDataSet.setColors(customColors)
        val dataSet = listOf(firstDataSet, secondDataSet)

        // Create a BarData object and set data sets
        val barData = BarData(dataSet)
        barData.barWidth = barWidth
        val xAxis = barChart.xAxis
        xAxis.axisMinimum = -0.5f
        xAxis.axisMaximum = list.size - 0.5f
        xAxis.valueFormatter = object : ValueFormatter() {
            private val dateFormat = SimpleDateFormat("dd.MM", Locale.getDefault())

            override fun getFormattedValue(value: Float): String {
                val index = value.toInt()
                return if (index >= 0 && index < dates.size) {
                    dateFormat.format(dates[index])
                } else {
                    ""
                }
            }
        }
        barChart.axisLeft.valueFormatter = object : ValueFormatter() {
            override fun getFormattedValue(value: Float): String {
                // Replace commas with spaces
                val formattedValue = value.toInt().toString().replace(',', ' ')

                // Return the formatted value as a string
                return formattedValue
            }
        }
        
        // Set the chart data
        barChart.data = barData

        // Update chart
        barChart.invalidate()

    }

private fun setupBarChart(maxValue: Float) {
        barChart.setDrawBarShadow(false)
        barChart.description.isEnabled = false
        barChart.setMaxVisibleValueCount(60)
        barChart.setPinchZoom(false)
        barChart.setDrawGridBackground(false)
        val xAxis = barChart.xAxis
        xAxis.setDrawGridLines(false)
        xAxis.position = XAxis.XAxisPosition.BOTTOM
        xAxis.textColor = ContextCompat.getColor(constraintLayoutStatisticsData.context, R.color.text)
        xAxis.granularity = 1f

        val yAxisLeft = barChart.axisLeft
        yAxisLeft.setDrawAxisLine(false)
        yAxisLeft.textColor = ContextCompat.getColor(constraintLayoutStatisticsData.context, R.color.text)
        val minValue = 0f
        val labelCount = 5
        val interval = Math.ceil((maxValue - minValue) / (labelCount - 1).toDouble()).toFloat()
        yAxisLeft.axisMinimum = minValue
        yAxisLeft.axisMaximum = maxValue
        yAxisLeft.setGranularity(interval)
        yAxisLeft.setLabelCount(labelCount, true)
        yAxisLeft.gridLineWidth = 2f
        barChart.axisRight.isEnabled = false
        barChart.legend.isEnabled = false
    }
 

I have also tried using ARGB values and gradients, but the result remains the same. The bars simply refuse to display the assigned colors.

Has anyone encountered a similar issue with bar charts? What could be causing this problem? Are there any specific configurations or settings that I might be missing?

Any help or suggestions would be greatly appreciated. Thank you in advance!

it needs to be like this:[bars with colors](https://i.sstatic.net/Q29koAnZ.png) but it is like this: aenter image description here

Answer 1

There are a few issues here:

1. You formatted your date strings as dd-m-yyyy but are searching using a format of d.m.yy so firstBarEntries is all 0 values

2. Your bar x positions are not set consistently. When you create the BarEntry list you are setting the x value based on the actual date

firstBarEntries.add(BarEntry(date.time.toFloat()- barWidth / 2, value.toFloat()))

but when you set up your x axis it is set based on the index in the original data list

xAxis.axisMinimum = -0.5f
xAxis.axisMaximum = list.size - 0.5f

So your bars are way outside that x range. You need to change the x value of the bars to also be index-based, and ensure you are using the "dates" list size instead of the list size since they can be different. You can also simplify the x axis a bit by using the pre-made IndexAxisValueFormatter

3. You need to call barChart.groupBars as described in this answer - or manually adjust the bar x positions when you create them.

4. You were never putting any data into secondBarEntries - I assume that was a typo.

Combining all these, the following modified version of your code appears to work as you intended (firstBarEntries are all gray, while secondBarEntries all have the same height but with a custom color based on the values in firstBarEntries):

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val barChart = findViewById<BarChart>(R.id.chart)

    val list = listOf(
        Triple("23-05-2024", 2010, 4.91),
        Triple("22-05-2024", 960, 13.62),
        Triple("21-05-2024", 5642, 2.0),
        Triple("20-05-2024", 1464, 4.85)
    )

    val maxValue=10000f
    setupBarChart(barChart, maxValue)

    // Create a list of dates
    val dates = ArrayList<Date>()
    val calendar = Calendar.getInstance()
    for (i in 0 until 6) {
        calendar.set(2024,4,19) // months are 0-based
        calendar.add(Calendar.DAY_OF_MONTH, i)
        dates.add(calendar.time)
    }

    // pre-compute a list of x axis labels to use with 
    // IndexAxisValueFormatter
    val xDateFormat = SimpleDateFormat("dd.MM", Locale.getDefault())
    val xAxisLabels = dates.map { xDateFormat.format(it) }

    // Create a list of values, adding 0 for missing dates
    // the x value here should match with the index in the list
    // of dates
    val firstBarEntries = ArrayList<BarEntry>()
    val secondBarEntries = ArrayList<BarEntry>()
    val lookupDateFormat = SimpleDateFormat("dd-MM-yyyy", Locale.getDefault())
    for (i in dates.indices) {
        val formattedDate = lookupDateFormat.format(dates[i])
        val value = list.find { it.first == formattedDate }?.second ?: 0
        firstBarEntries.add(BarEntry(i.toFloat(), value.toFloat()))
        val value2 = 4000f
        secondBarEntries.add(BarEntry(i.toFloat(), value2))
    }

    val firstDataSet = BarDataSet(firstBarEntries, "")
    firstDataSet.color = Color.GRAY

    val secondDataSet = BarDataSet(secondBarEntries, "")

    val customColors = mutableListOf<Int>()
    for (i in firstBarEntries.indices) {
        val ratio = firstBarEntries[i].y / secondBarEntries[i].y
        val color = when {
            ratio in 0.85..1.15 -> Color.GREEN
            ratio < 0.85 -> Color.MAGENTA
            else -> Color.RED
        }
        customColors.add(color)
    }
    firstDataSet.setDrawValues(false)
    secondDataSet.setDrawValues(false)
    secondDataSet.colors = customColors

    // ensure that groupSpace + 2*barSpace + 2*barWidth = 1
    val barWidth = 0.26f
    val barSpace = 0.08f
    val groupSpace = 1 - 2*barSpace - 2*barWidth

    // Create a BarData object and set data sets
    val barData = BarData(firstDataSet, secondDataSet)
    barData.barWidth = barWidth

    val xAxis = barChart.xAxis
    xAxis.axisMinimum = -0.5f
    xAxis.axisMaximum = dates.size.toFloat()
    xAxis.valueFormatter = IndexAxisValueFormatter(xAxisLabels)

    // Set the chart data
    barChart.data = barData
    barChart.groupBars(-0.5f, groupSpace, barSpace)

    // Update chart
    barChart.invalidate()
}

private fun setupBarChart(barChart: BarChart, maxValue: Float) {
    barChart.setDrawBarShadow(false)
    barChart.description.isEnabled = false
    barChart.setMaxVisibleValueCount(60)
    barChart.setPinchZoom(false)
    barChart.setDrawGridBackground(false)
    val xAxis = barChart.xAxis
    xAxis.setDrawGridLines(false)
    xAxis.position = XAxis.XAxisPosition.BOTTOM
    xAxis.textColor = Color.BLACK
    xAxis.granularity = 1f

    val yAxisLeft = barChart.axisLeft
    yAxisLeft.setDrawAxisLine(false)
    yAxisLeft.textColor = Color.BLACK
    val minValue = 0f
    val labelCount = 5
    val interval = Math.ceil((maxValue - minValue) / (labelCount - 1).toDouble()).toFloat()
    yAxisLeft.axisMinimum = minValue
    yAxisLeft.axisMaximum = maxValue
    yAxisLeft.setGranularity(interval)
    yAxisLeft.setLabelCount(labelCount, true)
    yAxisLeft.gridLineWidth = 2f
    barChart.axisRight.isEnabled = false
    barChart.legend.isEnabled = false
}