The following example shows how you can set the horizontal and vertical gaps on a Flex Legend control by setting the horizontalGap and verticalGap styles.
Full code after the jump.
Continue reading ‘Setting the horizontal and vertical gaps on a Legend control in Flex’
The following example shows how you can set the marker width and marker height on a Flex Legend control by setting the markerWidth and markerHeight styles.
Full code after the jump.
Continue reading ‘Setting the marker width and height on a Legend control in Flex’
The following example shows how you can set the label placement on a Flex Legend control by setting the labelPlacement style.
Full code after the jump.
Continue reading ‘Setting the label placement on a Legend control in Flex’
The following example shows how you can set a custom label function on a Flex PieChart control by setting the labelFunction property on the PieSeries object.
Full code after the jump.
Continue reading ‘Setting a custom label function on a PieChart in Flex’
The following example shows how you can set the font weight of a Flex Charting Legend control by setting the fontWeight style on the LegendItem CSS selector.
Full code after the jump.
Continue reading ‘Setting the font weight on a charting Legend control in Flex’
In a previous example, “Toggling data tips on a PieChart in Flex”, we saw how you could toggle data tips on a Flex PieChart control by setting the showDataTips property.
The following example shows how you can toggle data tip targets on a Flex PieChart control by setting the showDataTipTargets style.
Full code after the jump.
Continue reading ‘Toggling data tip targets on a PieChart in Flex’
The following example shows how you can toggle data tips on a Flex PieChart control by setting the showDataTips property.
Full code after the jump.
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 display the selected pie series item when the user clicks a wedge in a PieChart control.
Full code after the jump.
The following example shows how you can create transparent wedges in a Flex PieChart control by setting the SolidColor object’s alpha property to 0, as seen in the following snippet:
<mx:PieChart dataProvider="{arrColl}" height="100%" width="100%">
<mx:series>
<mx:PieSeries id="pieSeries" field="data">
<mx:fills>
<mx:SolidColor alpha="0.0" />
<mx:SolidColor color="haloBlue" alpha="1.0" />
</mx:fills>
<mx:filters>
<mx:Array />
</mx:filters>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
Full code after the jump.
Continue reading ‘Drawing transparent pie wedges in a Flex PieChart control’
The following examples show how you can change the default fill colors for a Flex PieChart control by setting the fills style using either CSS or MXML.
Full code after the jump.
Continue reading ‘Changing the default fill colors in a Flex PieChart control’
The following example shows how you can explode all wedges in a PieChart at once by using the explodeRadius property, as seen in the following snippet:
<mx:PieChart dataProvider="{dp.product}" height="100%" width="100%">
<mx:series>
<mx:PieSeries field="@data" labelPosition="callout">
<mx:explodeRadius>0.2</mx:explodeRadius>
<mx:filters>
<mx:Array />
</mx:filters>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
If you want to explode individual wedges, simply use the perWedgeExplodeRadius property.
Full code after the jump.
Continue reading ‘Exploding all wedges in a Flex PieChart control using the explodeRadius property’
The following example shows how you can customize the radial stroke in a Flex PieChart control by using the PieSeries class’s radialStroke style and the mx.graphics.Stroke class, as seen in the following snippet:
<mx:PieChart dataProvider="{dp.product}" height="250" width="100%">
<mx:series>
<mx:PieSeries id="pieSeries" field="@data">
<mx:radialStroke>
<mx:Stroke color="black" weight="2" />
</mx:radialStroke>
<mx:filters>
<mx:Array />
</mx:filters>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
Full code after the jump.
Continue reading ‘Customizing radial strokes in a Flex PieChart control’
The following example shows how you can customize the callout stroke in a Flex PieChart control by using the PieSeries class’s calloutStroke style and the mx.graphics.Stroke class, as seen in the following snippet:
<mx:PieChart dataProvider="{dp.product}" height="250" width="100%">
<mx:series>
<mx:PieSeries id="pieSeries" field="@data">
<mx:calloutStroke>
<mx:Stroke color="black"weight="2" />
</mx:calloutStroke>
<mx:filters>
<mx:Array />
</mx:filters>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
To see an example of changing the stroke around the pie chart itself, see “Customizing strokes in a Flex PieChart control”.
Full code after the jump.
Continue reading ‘Customizing callout strokes in a Flex PieChart control’
The following example shows how you can explode individual wedges in a PieChart when the user changes the value of a Slider control, or rolls over an item in a List control. For other examples of PieChart wedge exploding, check out “Exploding wedges in a Flex PieChart control”.
Full code after the jump.
Continue reading ‘Exploding wedges in a Flex PieChart control based on user input’
