Kotlin Line Chart

Today I will share my experience on drawing line charts in Android with Kotlin. When you want to develop a stock market application or show a statistical data about a user, you will need great line charts for your application. In order to view line charts in Android application, you need to add external libraries.

After deep research on the Internet, I was able to get some knowledge about several libraries to draw such charts in mobile applications. There are planty but most of them have few features and when you need additional things in your application, you are going to need to change your library and your application accordingly. After careful comparison among the android chart libraries, I believe this special library wins this contest.

You can find this libary by clicking on the link : MPAndroidChart. By using this special library you can draw excellent line charts on your application. I put some examples below that have been shared on project repository. After some time you can get such charts quickly.

So how are we going to implement such charts?

First of all you need to add library to your project with following lines:

You need to add maven both in allprojects and buildscript in build.gradle file.

After this step you are good to try it out! In order to add a line chart to your layout file, you just need to copy this into your layout file. You can adjust size and margis with respect to your design.

Here I added a line chart into a linear layout to restrict height of the chart and make it compatible with other layouts but you can use other layouts too! However if you want to add a background desing, I would recommend to add a linear layout and assign a background to it. My example gradient file as follows:

Don’t forget to create colorLight and colorDark values in your colors under values. Therefore, our design will look much greater. The second step is completed, now continue with the next step!

In this step, we implement Kotlin code to assign values to our line chart. I divide my example into several parts to show each step and the written code effect on our chart.

In part1 and part2, we simply create our example dataset. With the last version of MPAndroidChart library, our data should consist of float values.

In part3 we assign our list to LineDataSet and label it.

In part4, I set draw values to false because to each point it shows a corresponding value in the chart and for long term, it is going to be messy. I set draw filled true to fill below of my chart. I adjust my chart line width and select filled color. You can try them seperately to see how your line chart changes with each code.

In part5, I set label rotation angle to x axis. It sets the angle for drawing the X axis labels (in degrees) basicly.

In part6, I assign my dataset to line chart in the layout to draw.

Normally, line chart has two y axis, right and left sides and to remove right axis you should add part7 code in your project. If we want to show the last value you also need to add a small margin in your axis limit. If you do not, last value will not be shown in the chart. In this way, you are now able to monitorize all the values in your dataset.

Since a phone screen is relatively small, people want to zoom in and move around the chart. To enable these features, you just need to add Part8 to your project! You can see this charts as examples:

Zoom and Touch Enabled

In Part9, when your dataset fails and you want to write to your screen that there is “something went wrong” thing, you can add it into your project. Description is good for readers to understand what this chart demonstrates. So far our example creates a line chart like this:

In Part10, we can add animation to show while the dataset is loading into our screen. Animations only work for API 11 and higher and all charts types support animations. Three different animation types exist:

1. animateX(miliseconds) : Animates chart values on horizontal axis, left to right.
2. animateY(miliseconds) : Animates chart values on vertical axis, bottom to up.
3. animateXY(miliseconds, miliseconds) : Animates both vertical and horizontal axis.

There are lots of easing options and you can find more details about animations from here. Part10 code creates a result like this:

Animation Example

In Part11, if we want to show our values on the linechart, we can create custom marker for that. This marker works like this:

To do this first create layouts for this. This code block is to show values in the screen. We create a text view to assign each value.

This is the custom background for your marker. After adding these layouts, you need to create CustomMarker.kt to control your marker functions as follow:

Here gettOffSet function controls where this markers is located in the chart. I made it right above the circle it points. Moreover, you can set your text view value in refreshContent function. After adding these, to add this custom marker to your line chart you just need to add part 11 to your project! Our final result as follows:

Final Line Chart

I hope you enjoyed while reading this article and learn how to add great line charts to your projects!