Reputation: 1
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