The following example shows how you can change the line colors in a LineChart in Flex by setting the lineStroke style in MXML or ActionScript, as seen in the following snippets:

MXML:

<mx:LineSeries id="closeSeries" yField="@close" form="curve" displayName="Close">
    <mx:lineStroke>
        <mx:Stroke color="haloGreen" weight="2" alpha="0.6" />
    </mx:lineStroke>
</mx:LineSeries>

ActionScript:

<mx:LineSeries id="closeSeries" yField="@close" form="curve" displayName="Close" />
...
closeSeries.setStyle("lineStroke", new Stroke(0xFF0000, 2, 0.4));

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/11/13/changing-default-line-colors-in-a-flex-linechart-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.styles.StyleManager;
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <quote date="8/27/2007" open="40.38" close="40.81" />
                <quote date="8/24/2007" open="40.5" close="40.41" />
                <quote date="8/23/2007" open="40.82" close="40.6" />
                <quote date="8/22/2007" open="40.4" close="40.77" />
                <quote date="8/21/2007" open="40.41" close="40.13" />
                <quote date="8/20/2007" open="40.55" close="40.74" />
                <quote date="8/17/2007" open="40.18" close="40.32" />
                <quote date="8/16/2007" open="39.83" close="39.96" />
                <quote date="8/15/2007" open="40.22" close="40.18" />
                <quote date="8/14/2007" open="41.01" close="40.41" />
                <quote date="8/13/2007" open="41" close="40.83" />
                <quote date="8/10/2007" open="41.3" close="41.06" />
                <quote date="8/9/2007" open="39.9" close="40.75" />
                <quote date="8/8/2007" open="39.61" close="40.23" />
                <quote date="8/7/2007" open="39.08" close="39.42" />
                <quote date="8/6/2007" open="38.71" close="39.38" />
                <quote date="8/3/2007" open="39.47" close="38.75" />
                <quote date="8/2/2007" open="39.4" close="39.52" />
                <quote date="8/1/2007" open="40.29" close="39.58" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="0xFF0000" click="closeSeries.setStyle('lineStroke', new Stroke(0xFF0000, 2, 0.4));" />
        <mx:Button label="0xFF00FF" click="closeSeries.setStyle('lineStroke', new Stroke(0xFF00FF, 2, 1.0));" />
        <mx:Button label="haloSilver" click="closeSeries.setStyle('lineStroke', new Stroke(StyleManager.getColorName('haloSilver'), 2, 1.0));" />

        <mx:Spacer width="100%" />

        <mx:Legend dataProvider="{lineChart}" />
    </mx:ApplicationControlBar>

    <mx:LineChart id="lineChart"
            showDataTips="true"
            dataProvider="{dp}"
            width="100%"
            height="100%">

        <!-- series filters -->
        <mx:seriesFilters>
            <mx:Array />
        </mx:seriesFilters>

        <!-- vertical axis -->
        <mx:verticalAxis>
            <mx:LinearAxis baseAtZero="false" title="Price" />
        </mx:verticalAxis>

        <!-- horizontal axis -->
        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca" categoryField="@date" title="Date" />
        </mx:horizontalAxis>

        <!-- horizontal axis renderer -->
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer axis="{ca}" canDropLabels="true" />
        </mx:horizontalAxisRenderers>

        <!-- series -->
        <mx:series>
            <mx:LineSeries id="closeSeries" yField="@close" form="curve" displayName="Close">
                <mx:lineStroke>
                    <mx:Stroke color="haloGreen" weight="2" alpha="0.6" />
                </mx:lineStroke>
            </mx:LineSeries>
            <mx:LineSeries yField="@open" form="curve" displayName="Open">
                <mx:lineStroke>
                    <mx:Stroke color="haloOrange" weight="2" alpha="0.6" />
                </mx:lineStroke>
            </mx:LineSeries>
        </mx:series>
    </mx:LineChart>

</mx:Application>

View source is enabled in the following example.

When setting a stroke in ActionScript, note that you must pass the stroke color as a numeric value (like 0xFF0000), not as a color name (like “red”):

closeSeries.setStyle("lineStroke", new Stroke(0xFF0000, 2, 0.4));

If you want to use a named color, you can use the static StyleManager.getColorName() method, as shown in the following snippet:

closeSeries.setStyle("lineStroke", new Stroke(StyleManager.getColorName("red"), 2, 1.0));
 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

6 Responses to Changing default line colors in a Flex LineChart control

  1. DaRk6 says:

    Thank You!!

  2. mikeyq6 says:

    How do you do this using CSS? I have a bar chart and a line chart, and using the fill style, can change the bar chart columns, but not the line chart colours, like:


    .line0 {
    fill: #fad31e;
    }

    And creating the lineseries dynamically, using:

    ls = new LineSeries();
    ls.id = "Series" + i;
    ls.displayName = currentLabels[i];
    ls.dataProvider = currentChartData[i];
    ls.xField = "year";
    ls.yField = "value";
    ls.styleName = ".line" + i;

    But the fill doesn’t seem to do anything. How do you set a stroke in CSS?

  3. Simon Lenoir says:

    you can define stroke with css, but can’t initiate a stroke object in css.
    = can’t use css in this case because lineseries is expecting a stroke object

    for a columnchart you can use:
    ColumnChart{
    chartSeriesStyles: Series1, Series2, Series3, Series4, Series5;
    }
    .Series1 {fill: #XXXXX;}
    .Series2 {fill: #SSSSS;}

    but for a linechart you will have to use a work around like a loop in an array of color:uint

  4. pankaj says:

    How do I do this using actionScript 3 for barchart.
    Help me please.

  5. krunal says:

    is it possible to have single line have multicolor. like i have break event point. and after that break point my chart line color will differ.

  6. hIUG says:

    thanks dude, still usefull

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree