The following example shows how you can display the labels in a ColumnSeries either vertically or horizontally in a ColumnChart control in Flex by setting the Boolean showLabelVertically property.
Full code after the jump.
Continue reading ‘Displaying the labels vertically in Flex ColumnChart control’
The following example shows how you can create custom labels for a ColumnChart control’s ColumnSeries in Flex, as well as creating custom label functions for a linear axis and custom data tips for the ColumnChart control.
Full code after the jump.
Continue reading ‘Adding custom labels to a Flex ColumnChart control’s column series’
The following example shows how you can customize the column width in a Flex ColumnChart control by setting the columnWidthRatio style, as seen in the following snippet:
<mx:ColumnChart id="columnChart" columnWidthRatio="0.85">
// …
</mx:ColumnChart>
Full code after the jump.
Continue reading ‘Changing the default column width ratio of a ColumnChart control in Flex’
The following code shows you how you can customize the item roll over color and item selection color in a Flex ColumnChart control by setting the itemRollOverColor and itemSelectionColor styles.
Full code after the jump.
The following example shows how you can add a stroke around chart items in a Flex ColumnChart control.
Full code after the jump.
Continue reading ‘Adding a stroke around a ColumnSeries item in a Flex ColumnChart control’
In a previous example, “Creating a linear gradient fill on a ColumnChart control’s column series in Flex”, we saw how to create a linear gradient fill for a ColumnChart in Flex. In the following example we look at how to create a radial gradient fill.
Full code after the jump.
Continue reading ‘Creating a radial gradient fill on a ColumnChart control’s column series in Flex’
In a previous example, “Rotating a Flex PieChart control when a user clicks on an item”, we looked at changing a PieChart’s rotation when the user clicked on a pie wedge. In the following example, we look at how to add a nice animation effect with some easing to make the effect a bit more smooth.
Full code after the jump.
Continue reading ‘Animating a Flex PieChart control’s rotation when a user clicks on an item’
The following example shows how you can create a linear gradient fill for a ColumnSeries in Flex.
Full code after the jump.
Continue reading ‘Creating a linear gradient fill on a ColumnChart control’s column series in Flex’
The following example shows how you can set a specific minimum and maximum LinearAxis range for a LineChart control in Flex.
Full code after the jump.
The following example shows how you can align the tick marks along the vertical and horizontal axis using the horizontalTickAligned and verticalTickAligned styles in the GridLines class, as seen in the following snippet:
<mx:GridLines direction="both"
horizontalTickAligned="false"
verticalTickAligned="false">
…
</mx:GridLines>
Full code after the jump.
Continue reading ‘Aligning data in a Flex LineChart control to horizontal and vertical tick marks’
In a previous example, “Alternating background row colors in a Flex LineSeries chart”, we saw how to alternate row colors in a LineSeries chart using the horizontalFill and horizontalAlternateFill styles.
In the following example, we see a similar technique for setting column background colors using the verticalFill and verticalAlternateFill styles, as seen in the following snippet:
<mx:LineChart showDataTips=true dataProvider={dp}>
<mx:backgroundElements>
<mx:GridLines direction=vertical>
<mx:verticalFill>
<mx:SolidColor color=haloBlue alpha=0.2 />
</mx:verticalFill>
<mx:verticalAlternateFill>
<mx:SolidColor color=haloSilver alpha=0.2 />
</mx:verticalAlternateFill>
</mx:GridLines>
</mx:backgroundElements>
…
</mx:LineChart>
In this example, you also see examples of setting custom label functions for a LinearAxis and CategoryAxis, both of which we’ve seen examples of before (“Creating a custom label function on a Flex LineChart control’s linear axis” and “Creating a custom label function on a Flex LineChart control’s category axis” respectively) but it’s always fun to see a few of these things in a single example.
Full code after the jump.
Continue reading ‘Alternating background column colors in a Flex LineSeries chart’
The following example shows how you can change the direction of a Flex chart’s legend by setting the direction property, as seen in the following snippet:
<mx:Legend dataProvider="{lineChart}" direction="horizontal" />
Full code after the jump.
The following example shows how you can create a custom label function on a CategoryAxis in a Flex LineChart control.
For an example of creating a custom label function for the vertical/linear axis, check out “Creating a custom label function on a Flex LineChart control’s linear axis”.
Full code after the jump.
Continue reading ‘Creating a custom label function on a Flex LineChart control’s category axis’
The following example shows how you can adjust the interval of horizontal grid lines in a LineChart by setting the horizontalChangeCount style.
Full code after the jump.
The following example shows how you can add horizontal or vertical (or both) grid lines to a LineChart contol in Flex by setting the direction style in the GridLines tags, as seen in the following snippet:
<mx:LineChart dataProvider="{dp}">
<mx:backgroundElements>
<mx:GridLines direction="vertical" />
</mx:backgroundElements>
</mx:LineChart>
Full code after the jump.
Continue reading ‘Displaying grid lines in a Flex LineChart control’
