Sizing Chart on Kotlin

In this article, I will share my journey in implementing a live data chart using Kotlin programming language. Initially, I used the jjoe64 library, but due to some performance issues, my application experienced a slight lag.

But it’s not to blame the library, perhaps I lacked in optimizing the memory settings used by the application, causing the library to not function properly. Here, I have provided the GitHub link if you want to try the library.

GitHub - jjoe64/GraphView: Android Graph Library for creating zoomable and scrollable line and bar…

So, I decided to use another library, namely MPAndroidChart.

GitHub - PhilJay/MPAndroidChart: A powerful 🚀 Android chart view / graph view library, supporting…

However, in this article, I will not discuss the tutorial for using MPAndroidChart. Instead, I will focus on how to customize the colors of the charts inside it and ensure it is compatible with all screen sizes of mobile devices.

To calculate the size of the chart in MPAndroidChart, I use chart.viewTreeObserver, which monitors the view hierarchy for changes

Then, I also use the OnGlobalLayoutListener parameter, which is used to be triggered when the global layout of the view changes. Here my code :

class MainActivity : AppCompatActivity() {

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

        // Get the chart view from the layout
        val chart = findViewById<LineChart>(R.id.chart)

        // Create some data to display
        val entries =arrayListOf(
            Entry(0f, 20f),
            Entry(1f, 30f),
            Entry(2f, 25f),
            Entry(3f, 40f),
            Entry(4f, 35f),
            Entry(5f, 50f),
            Entry(6f, 45f)
        )

        // Create a dataset from the data
        val dataSet = LineDataSet(entries, "Label")
        dataSet.color= Color.BLUE
        dataSet.valueTextColor= Color.RED

        // Add the dataset to the chart
        val dataSets = ArrayList<ILineDataSet>()
        dataSets.add(dataSet)
        val data = LineData(dataSets)
        chart.data= data

        // Configure the chart
        chart.setTouchEnabled(true)
        chart.setPinchZoom(true)
        chart.setBackgroundColor(Color.BLACK)
        chart.setDrawGridBackground(true)
        chart.setGridBackgroundColor(Color.WHITE)

        // Configure the x-axis
        val xAxis = chart.xAxis
        xAxis.position= XAxis.XAxisPosition.BOTTOM
        xAxis.textSize= 12f
        xAxis.textColor= Color.RED
        xAxis.setDrawAxisLine(true)
        xAxis.setDrawGridLines(false)

        val padding = chart.paddingLeft+ chart.paddingRight

        val rangeHorizontal = xAxis.mAxisRange

        // Configure the y-axis
        val yAxisLeft = chart.axisLeft
        yAxisLeft.textSize= 12f
        yAxisLeft.textColor= Color.RED
        yAxisLeft.setDrawLabels(true)
        yAxisLeft.setDrawGridLines(true)

        val rangeVertical = yAxisLeft.mAxisRange

        val yAxisRight = chart.axisRight
        yAxisRight.isEnabled= false

        val gridSizeInPx = (rangeVertical *resources.displayMetrics.density).toInt()
        val gridSizeInPx2 = (rangeHorizontal *resources.displayMetrics.density).toInt()


        // Invalidate the chart to redraw it with the new data
        chart.invalidate()

        val dpValue = 16 // dimension value in dp
        val pxValue = TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            dpValue.toFloat(),
            resources.displayMetrics
            ).toInt()

        chart.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
            override fun onGlobalLayout() {
                // remove the listener to avoid multiple calls
                chart.viewTreeObserver.removeOnGlobalLayoutListener(this)

                // get the size of the chart
                val width = chart.width- padding
                val height = chart.height- padding

                val button: Button = findViewById(R.id.button)
                button.setOnClickListener{
                // show the size of the chart in a toast message
                Toast.makeText(this@MainActivity, "Chart size: $width x $height", Toast.LENGTH_SHORT).show()
              }
            }
        })
    }
}

and here my screenshoot after debug

Maybe that’s all for this article. For the next article, I will discuss how to color inside the chart. Thank you :) feel free to ask if you have any questions.