Question

I’m having difficulty with Flex charts. I’m working on a complete rewrite of a flex app that has a fair bit of charting involved, and I’ve been instructed to get the look and feel as close to the previous version as possible (for the initial release).

I can’t seem to find the style property which dispays a blue, tabbed sort of effect of the chart axes. As I don’t have the rep to post an image, I’ll direct you to the adobe live docs ‘using line charts’ page (sorry, I can only post one link because of the anti spamming mechanism, see link in the edit below) – the effect is present on the vertical axis of the chart at the top of the line charts examples page.

It seems to be some kind of default setting, but I have not been able to pin it down, not even when copying chunks of the old code.

If anyone has any ideas as to how to get hold of this style, or as to what could be removing this style, I’d be extremely grateful.

Thanks for reading.

Edit:

Sorry I will try to clarify:

If you look at the chart at the top of the using line charts page in the Adobe Live docs, the vertical axis has a thick, blue tabbed style, but the horizontal axis does not.

I am trying to gain control over this blue tabbed style – specifically I want to make it appear on the horizontal axis and remove it from the vertical axis of a line chart. However, I cannot find the property which sets this style.

I know it is possible to alter this style, as I have seen examples of charts with the look I need, however there does not appear to be an obvious way to alter it.

I hope this is a bit clearer. Thanks.

Answer 1

The blue bar that comes by default is a stroke. The white divisions within it are minor ticks.

To style it differently, you need four parts:

1. a chart (e.g. LineChart)
2. an Axis (e.g. LinearAxis)
3. an AxisRenderer
4. a Stroke (e.g. SolidColorStroke)

Then you’ll have to connect these parts:

  var chart = new LineChart();
  var vAxis = new LinearAxis();

  var stroke = new SolidColorStroke();
  stroke.caps = CapsStyle.NONE;
  stroke.weight = 1;
  stroke.color = 0x000000;

  var axisRenderer = new AxisRenderer();
  axisRenderer.axis = vAxis;
  axisRenderer.setStyle("axisStroke", stroke);
  // Only if you don't want minor ticks to display:
  axisRenderer.setStyle("minorTickPlacement", "none");

  chart.verticalAxis = vAxis;
  chart.verticalAxisRenderers = [axisRenderer];

You’ll find more on the topic here: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7c65.html