Flex Chart styling

Recently, I needed to apply some styling to the Flex DataVisualization component charts.

It had to look like this:

chart

So, I decided to tackle this one step at a time:

White background
First thing I tried was to set the chart fill style to white.
This caused the entire chart to have a white background (axis, labels etc), so it didn’t help.

So, I thought of gridlines – if I could just set the background of the grid lines only, that would achieve my goal. Only problem was, that there is no easy way to get to the GridLines object within the chart. This forced me to write some ugly code to get the GridLines instance and apply the required styles:

var gl:GridLines;
for each (var o:Object in chart.backgroundElements) {
     if (o is GridLines) {
          gl = GridLines(o);
          gl.setStyle("horizontalFill", 0xffffff);
          gl.setStyle("horizontalAlternateFill", 0xffffff);
     }
     break;
}

This worked perfectly for every chart, except for BarChart. For some reason, BarChart draws the GridLines vertically, so the styling for horizontal fills didn’t work.

I know what you think – why not set both vertical and horizontal right? That’s what I was thinking too, and added verticalFill, verticalAlternateFill and direction as “both”. Didn’t work.
A quick look at the GridLines updateDisplayList function code showed that first it draws (horizontal || both) and after that (vertical || both), so for bar chart, no matter what you set, the vertical gridlines are on top…

Since the DataVisualization code is all private nightmare, and I couldn’t override any of this functionality, I was forced to write some more ugly code:
*Note – descriptor is an instance of a custom class I have that holds the chart type, among other things…

var gl:GridLines;
for each (var o:Object in chart.backgroundElements) {
     if (o is GridLines) {
          gl = GridLines(o);
          if (descriptor.chartType == ChartType.CHART_BAR) {
               gl.setStyle("verticalFill", 0xf7f7ff);
               gl.setStyle("verticalAlternateFill", 0xf7f7ff);
          } else {
               gl.setStyle("horizontalFill", 0xf7f7ff);
               gl.setStyle("horizontalAlternateFill", 0xf7f7ff);
         }
         break;
     }
}

Now,  I needed to show the corresponding lines in the GridLines (not just the background) and for BubbleChart specifically, to show vertical and horizontal lines.

Behold, the final working code:

var gl:GridLines;
var stroke:Stroke = new Stroke(0x000000, 1, 0.25);
for each (var o:Object in chart.backgroundElements) {
     if (o is GridLines) {
          gl = GridLines(o);
          if (descriptor.chartType == ChartType.CHART_BAR) {
               gl.setStyle("verticalFill", 0xf7f7ff);
               gl.setStyle("verticalAlternateFill", 0xf7f7ff);
               gl.setStyle("verticalStroke", stroke);
          } else if (descriptor.chartType == ChartType.CHART_BUBBLE) {
               gl.setStyle("horizontalFill", 0xf7f7ff);
               gl.setStyle("horizontalAlternateFill", 0xf7f7ff);
               gl.setStyle("horizontalStroke", stroke);
               gl.setStyle("verticalStroke", stroke);
          } else {
               gl.setStyle("horizontalFill", 0xf7f7ff);
               gl.setStyle("horizontalAlternateFill", 0xf7f7ff);
               gl.setStyle("horizontalStroke", stroke);
          }
          break;
     }
}

OK, we got the white background sorted out, whew…

Round tick marks

Now, we need that round tick marks on the vertical axis…
fortunately, there are a few styles on the AxisRenderer class that fit the bill:
tickLength, tickStroke and tickPlacement.

All you have to do is apply these styles to the chart’s vertical axis AxisRenderer and you’re golden…

var vertAxisRenderer:AxisRenderer = AxisRenderer(chart.verticalAxisRenderer);
if (vertAxisRenderer) {
     vertAxisRenderer.setStyle("tickStroke", new Stroke(0x000000, 4, 1, false, "normal", "round"));
     vertAxisRenderer.setStyle("tickLength", 0.5);
     vertAxisRenderer.setStyle("tickPlacement", "cross");
}

Make axis thin black line

Chart has styles for horizontalAxisStyleName and verticalAxisStyleName, so I defined some styles in CSS:


.HorizontalAxis {
 tick-color: #000000;
}

.VerticalAxis {
 tick-color: #000000;
}

And then I set those styleNames to the chart:

chart.setStyle("horizontalAxisStyleName", "HorizontalAxis");
 chart.setStyle("verticalAxisStyleName", "VerticalAxis");

And that’s it!

Advertisements

2 Responses to Flex Chart styling

  1. lynxoid says:

    You can actually specify all of those in a single CSS file too – this way you do not have to go though each component in a chart calling an expensive setStyle() method

  2. flexblackbelt says:

    While that is true to some extent, charts components are particularly nasty when it comes to styles and actually some of the styles I use are not available in CSS.
    Moreover, the styles I apply are conditional and this complicates things even further, since I’d have to call setStyle anyway for each internal CSS style declaration for each condition…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: