Taking Control of Flex Charting Styles

This is a guide to help you modify the Flex charting components' default styles to create charts that are more attractive and easier to comprehend.

I have a fairly long history with building charting components in Flash and Flex. My first job involved developing a suite of "drag and drop" charts and other modeling tools in Flash for a financial modeling application. Now I am working at Gallup, Inc. (the guys who do "the Gallup Poll"...) and have authored a Flex application which renders charts for gallup.com articles. Along the way I've studied works by Edward Tufte (he's been called "the DaVinci of data visualization") as well as Stephen Few (who offers some great practical application to Tufte's theory) and others. Given all the research that has been done in human perception and data visualization, I feel that the default styles for the Flex charting components need a bit of tweaking to really optimize their usability. (Also, from what I've seen of the ILOG Elixir library, those charts need A LOT of tweaking... but let's try to stay on topic ;). This article will kick off a series where I will share some of my tricks for making charting components that are both aesthetically pleasing and easy to comprehend.

Getting Started

I'm going to focus on the 3 basic chart types: LineChart, ColumnChart, and BarChart, and you can apply many of these tricks to other more complex types. I created a simple application which sticks one of each chart type in a TabNavigator, gives them some data providers, and sets up the series. Its pretty basic, no special styles are applied. I realize that this would be a very poor structure for a real application - I'm organizing it in the way that best illustrates the techniques below.

From this point on you may find it useful to follow along with the source in the final application.

Application - Source

Develop a Color Scheme

I could write an entire post on the use of color (and I might in the future), but I'll cover this briefly. Usually, you want all of your series to have equal visual weight, so the two obvious options are to vary the hue, or to vary the brightness and saturation. One thing to keep in mind when varying hue though, is that about 1 in 76 people (thats 3.5 million in the US alone) have some sort of color deficit, the most common being red-green color blindness. Selecting red and green colors that don't vary significantly in brightness can make your chart very difficult to interpret for a fairly significant part of the population. It also might make your colors indistinguishable when printed in grayscale. Let's play it safe by using the second option. A great resource that I have used on many occasions is Color Brewer, which was developed by Cynthia Brewer to create good color schemes for maps. The same schemes work great for graphs too! I set it to "sequential" and selected a blue scheme which should work very nicely.

To apply your selected colors, set the "fill" property on each series. You can bind to a SolidColor object created in actionscript, or inline a <fill> tag in mxml.

Changing The Default Styles

First thing's first: the drop shadows have to go. I'm all for using filters and effects in Flex applications, but they really tend to get in the way of the data when used in charts. This is an easy fix. Just set seriesFilters="[]" for each chart.

Similarly, since outlining bars will also add extra clutter, I will set stroke="{null}" for each series (BarSeries and ColumnSeries).

Now, because we want to override a lot of default settings on the Axis, AxisRenderers and GridLines, we'll have to explicitly lay them out in mxml for each chart type. For the BarChart it will look something like this:

AxisRenderers

Rather than the fat blue axis that is available by default, I prefer to use a thinner light gray stroke instead. The only purpose of the axis line is to provide a little visual separation between the categories (or dates) and the data - so it doesn't need a lot of visual weight. The axis that runs along the LinearAxis (eg the horizontal one on a BarChart, or the vertical one on a ColumnChart) won't be necessary at all. It will be implied by the grid lines which will all come to an end right at the axis. To turn it off, set showLine="false".

Update:  To improve the readability of the graph i have use the labelGap property to increase the gap from it's default of 3 to 10-12 on each axis.

GridLines

Even the grid lines are often non-essential to the readability of the graph. When the data permits it, I prefer to use Ely Greenfield's bar labels and leave the gridlines off all together. This results in a super clean and modern look. For the sake of example though, I included them here.

You always want the grid lines to run perpendicular to the LinearAxis. (The only time I can think of that you would want them running both ways is in a chart with 2 linear axes, like a scatter plot). You control this by setting direction="vertical" or direction="horizontal" on the GridLines element. Likewise, we only want to display the origin (i.e. 0) for the same direction. So on a ColumnChart, you would set direction="horizontal", verticalShowOrigin="false" and horizontalShowOrigin="true". On a BarChart, you would set direction="vertical", verticalShowOrigin="true" and horizontalShowOrigin="false".

I chose to make the stroke for the origin the same as the stroke for the Axis: light gray with 3 pixel weight. The stroke for the grid lines themselves should be very faint - no more than 1 pixel wide and only slightly lighter or darker than the background color. We don't want the grid lines to compete for the viewer's attention along with the actual data.

The final trick I employed here was offsetting the gridlines -.5 pixels. This solves a glitch where the top line doesn't always display. Try removing the line x="-.5" in the SampleBarChart class and you will see what I mean. Obviously this is a hack, but it has worked pretty well for me thus far.

LineCharts

There aren't many differences here except we are setting the "lineStroke" style instead of "fill" on the series. My rule of thumb is that the thickness of the line should approximately equal width/number of points or 3, whichever is less. This is a very general heuristic, but will help ensure that in very dense data sets, the thickness of the line doesn't obscure the data points. Because this isn't easy to generalize for all different types of dataProviders and because my data set isn't dynamic, I just set the weight to 3.

I also added a labelFunction to the DateTimeAxis so that the dates would show up in a more readable format. "Feb 2008" is much more readable than "2/08".

The Final Product

That's it! You could further improve on this example by adding a legend, selecting a better font, and maybe embedding the text - but I'll leave that for you to experiment with. Of course these settings won't work for every situation, but I think it makes for a good starting point for whatever types of data you might come across. As you probably have noticed, the emphasis is all on simplicity. By removing the extra "fluff", you create a chart where the data is the main focus and enable the user to have the best possible experience.

If you have additional suggestions, or questions regarding chart styles feel free to comment.

Application - Source