Quick Start Guide

Basic Styling

The chart in its current state is a little plain. This section will build on the simple chart that you have and add some styling to it. So at this point your app should look a little something like this:

Basic chart

Not exactly thrilling! Let’s spruce it up a bit by adding a bit more color to the chart. To make it stand out a bit more we’ll give it a gradient fill that goes from a partially transparent color to a solid one. The first thing you’ll want to do is get hold of the SeriesStyle object. Then set the fill style and the colors.

val style1 = series1.style
style1.fillStyle = SeriesStyle.FillStyle.GRADIENT
style1.areaColor = Color.argb(179, 94, 51, 95)
style1.areaColorGradient = Color.argb(255, 94, 51, 95)

val style2 = series2.style
style2.fillStyle = FillStyle.GRADIENT
style2.areaColor = Color.argb(179, 26, 96, 164)
style2.areaColorGradient = Color.argb(255, 26, 96, 164)

Tip: Here, for brevity, the Color class is being used to create a color int from the alpha, red, blue and green values supplied. A more Android-like approach would be to define the values in a resources file. See https://developer.android.com/guide/topics/resources/providing-resources for more information about resources and how to use them.

The sine waves come right up to the top and bottom of the chart. You can tell the Y axis to give itself a little more space with this:

yAxis.defaultRange = NumberRange(-1.05, 1.05)

Finally, because you’ve made some styling changes, tell the chart to redraw itself:

shinobiChart.redrawChart()

Tip: As the above changes are being done effectively while the chart is being initialized, in the onCreate() method, it's not strictly necessary to call redrawChart(). However, if you were to change some style values later on in the chart's lifecycle those changes would not take effect until redrawChart() is called.

The styling changes you have made here are very basic. However, it is possible to radically change the way the chart looks through the use of advanced styling techniques.


<< Previous: Adding a Series | Next: Conclusion >>