Sukdeb Midya
Sukdeb Midya

Reputation: 1

How to create a line chart with multiple data series and each line having a different gradient background in Android using Kotlin?

I am working on an Android project using Kotlin where I need to create a line chart with multiple data series. Each series should have its own gradient background, similar to the chart shown in the attached image.Applying different gradient backgrounds under each line.

I am using the MPAndroidChart library and I have managed to plot the lines, but I encounter an issue when applying gradient backgrounds. But the background color of the entire graph is the background color of the highest data series Out put

val colorArray = arrayOf(ContextCompat.getColor(requireContext(), R.color.medium_blue), ContextCompat.getColor(requireContext(), R.color.light_green),ContextCompat.getColor(requireContext(), R.color.colorSecondary) )
        mpLineChart = view.findViewById(R.id.compositionGraph)
        binding.tvYAxis.rotation = -90f

        with(mpLineChart){

            xAxis.apply {
                setDrawAxisLine(false)
                setDrawGridLines(false)
                position = XAxis.XAxisPosition.BOTTOM
                //setLabelCount(12, true)
                valueFormatter = IndexAxisValueFormatter(monthList)
                //labelRotationAngle = -59F
                granularity = 1f
            }

            axisLeft.apply {
                setDrawAxisLine(false)
                setDrawGridLines(true)
                isEnabled = true
                axisMinimum = 0F
                axisMaximum = 100F
                setLabelCount(11)
            }

            axisRight.apply {
                setDrawAxisLine(false)
                isEnabled = false
            }

            legend.yOffset = 60f
            legend.isEnabled = true

            legend.textSize = 12f
            legend.form = Legend.LegendForm.LINE
            legend.formSize = 12f
            legend.yEntrySpace = 8f
            legend.formToTextSpace = 6f

            val legendEntries = arrayOfNulls<LegendEntry>(3)
            for(i in legendEntries.indices){
                val entry = LegendEntry()
                entry.formColor = colorArray[i]
                entry.label = legendName[i]
                legendEntries[i] = entry
            }

            legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM
            legend.horizontalAlignment = Legend.LegendHorizontalAlignment.LEFT
            legend.orientation = Legend.LegendOrientation.HORIZONTAL
            legend.setDrawInside(false)
            legend.setCustom(legendEntries)
            description.isEnabled = false

        }

        val lineDataSet1 =  LineDataSet(dataValues1(), "Data Values 1")
        lineDataSet1.apply {
            setDrawValues(false)
            lineWidth = 2f
            fillColor = Color.WHITE
            setDrawFilled(true)
            color = ContextCompat.getColor(requireContext(), R.color.medium_blue)
            circleHoleColor = ContextCompat.getColor(requireContext(), R.color.white)
            setCircleColor(requireContext().getColor(R.color.medium_blue))
            circleSize = 5f
            val lineGradient1 = ContextCompat.getDrawable(requireContext(), R.drawable.fade_blue)
            fillDrawable = lineGradient1
        }

        val lineDataSet2 =  LineDataSet(dataValues2(), null)
        lineDataSet2.apply {
            lineWidth = 2f
            setDrawValues(false)
            setDrawFilled(true)
            color = ContextCompat.getColor(requireContext(), R.color.light_green)
            circleHoleColor = ContextCompat.getColor(requireContext(), R.color.white)
            setCircleColor(requireContext().getColor(R.color.light_green))
            circleSize = 5f
            val lineGradient2 = ContextCompat.getDrawable(requireContext(), R.drawable.fade_green)
            fillDrawable = lineGradient2

        }

        val lineDataSet3 =  LineDataSet(dataValues3(), null)
        lineDataSet3.apply {
            lineWidth = 2f
            setDrawValues(false)
            setDrawFilled(true)
            color = ContextCompat.getColor(requireContext(), R.color.colorSecondary)
            circleHoleColor = ContextCompat.getColor(requireContext(), R.color.white)
            setCircleColor(requireContext().getColor(R.color.colorSecondary))
            circleSize = 5f
            val lineGradient3 = ContextCompat.getDrawable(requireContext(), R.drawable.fade_red)
            fillDrawable = lineGradient3
        }

        val dataSets: ArrayList<ILineDataSet> = arrayListOf()
        dataSets.add(lineDataSet1)
        dataSets.add(lineDataSet2)
        dataSets.add(lineDataSet3)

        val data = LineData(dataSets)
        mpLineChart.data = data
        mpLineChart.setVisibleXRangeMaximum(5f)

        val markerView = CustomMarker(requireContext(), R.layout.marker_view_layout)
        mpLineChart.marker = markerView

Upvotes: 0

Views: 42

Answers (0)

Related Questions