Adobe Flex 3 Data Visualization Developer Guide
For more information on using renderer classes to change the appearance of ChartItem objects such as the LineChart
controls line segments, see “Skinning ChartItem objects on page 132.
Using vertical lines in a LineChart control
You can create LineChart controls that show vertical progression. The following example shows two LineSeries in a
LineChart control that are displayed vertically rather than horizontally:
To make lines in a LineChart control display vertically rather than horizontally, you must do the following:
Explicitly define the xField and yField properties for the LineSeries object.
Set the sortOnXField property of the LineSeries object to false.
By default, data points in a series are sorted from left to right (on the x-axis) before rendering. This causes the
LineSeries to draw horizontally. When you disable the
xField sort and explicitly define a yField property, Flex
draws the lines vertically rather than horizontally.
Flex does not sort any data vertically. As a result, you must ensure that your data is arranged correctly in the data
provider. If it is not arranged correctly, Flex renders a zig-zagging line up and down the chart as it connects those
dots according to position in the data provider.
The following example creates a LineChart control that displays vertical lines:
<?xml version="1.0"?>
<!-- charts/VerticalLineChart.mxml -->
<mx:Application xmlns:mx="">
import mx.collections.ArrayCollection;
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2000, Expenses:1100},
{Month:"Feb", Profit:1800, Expenses:1055},
{Month:"Mar", Profit:1200, Expenses:800},
{Month:"Apr", Profit:1400, Expenses:900},
{Month:"May", Profit:1400, Expenses:1150},

Get ADOBE® FLEX® 3: ADVANCED DATA VISUALIZATION DEVELOPER GUIDE now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.