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 graph. 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 series’ style object. Then set the fill style and the colors.

LineSeriesStyle style1 = series1.Style;
style1.FillStyle = SeriesStyle.FillStyle.Gradient;
style1.AreaColor = Color.Argb(179,  94,  51,  95);
style1.AreaColorGradient = Color.Argb(255,  94,  51,  95);

LineSeriesStyle style2 = series2.Style;
style2.FillStyle = SeriesStyle.FillStyle.Gradient;
style2.AreaColor = Color.Argb(179,  26,  96, 164);
style2.AreaColorGradient = Color.Argb(255,  26,  96, 164);

Tip: Here, for brevity, the Android.Graphics.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 http://developer.android.com/guide/topics/resources/index.html 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 = new 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 >>