6 Replies Latest reply on Apr 8, 2010 11:09 AM by msakrejda

    Flex 3 chart fills

    topher1120

      Hi all,

      I'm having a problem with using chart fills in Flex 3 and having them render correctly and don't know how to resolve it.  The base idea is that I want to provide custom fill colors to my charts and prefer to do it via CSS.  My approach works correctly for column charts and bar charts, but does not work correctly for area charts and line charts.  In fact, using CSS styles for area charts and line charts turns the fill colors black regardless of the fill color I specify.  Even more interesting, I can define a color using <mx:SolidColor />, it is applied to the bar and column charts, but area and line charts seem to disregard the fill attribute and render using the default colors.  Below is a screenshot example of my problem when providing the fill colors via CSS.

      chartIssue.png

       

      I can post the sample application if need be.  For the moment, here is how I defined the styles in CSS (using <mx:Style /> but it's the same if the css is external):

      ColumnChart{
           chartSeriesStyles: chartFill1, chartFill2;
      }
      LineChart{
        chartSeriesStyles: chartFill1, chartFill2;
      }
      AreaChart{
        chartSeriesStyles: chartFill1, chartFill2;
      }       
      BarChart{
        chartSeriesStyles: chartFill1, chartFill2;
      }   
      .chartFill1{
        fill: #95bf3b;
      }       
      .chartFill2{
        fill: #fff267;
      }

       

      I've tried compiling the application under Flex 3.2.0 and 3.5.0.12683a.  Adobe's site tells me I have Flash Player version 10,0,42,34 installed.

       

      Any help is greatly appreciated.
      Thanks,

      topher

        • 1. Re: Flex 3 chart fills
          msakrejda Level 4

          Flex charting requires IStroke and IFill (such as SolidColor) instances for some style values, and not simple color values. Some charting components "massage" plain color values into simple Stroke and SolidColor instances.

           

          If you'd like a crazy workaround you could try what I outlined here: http://bitrotincarnate.wordpress.com/2009/12/16/strokes-and-fills-in-flex-css-through-acti onscript-injection/ . For a saner (albeit more cumbersome) approach, you could subclass these charts and teach them to accept plain color values.

          1 person found this helpful
          • 2. Re: Flex 3 chart fills
            topher1120 Level 1

            Interesting post. So, if I understand correctly, there is an inheritance problem with LineChart and AreaChart?  I guess this bears out.  In my experiments to get this working, I had in the past created a SolidColor instance and passed it to the LineSeries' fill property.  However, it appears to be ignored.  I'd rather not postprocess the CSS rendering as suggested in the post and am reluctant to subclass a "standard" component, especially since it is a "purchased" component and should have some sort of support for it, but will see where I can get to.

             

            topher

            • 3. Re: Flex 3 chart fills
              topher1120 Level 1

              I found solutions for the area chart and line chart (specifically looking at http://forums.adobe.com/message/2293760#2293760).  It turns out that area charts use a style called "areaFill" instead of the standard "fill".  Line charts actually use Strokes to paint the color instead of fill.  In thinking about the line chart portion of this a bit, it does make sense, but is not intuitive compared to how the other charts work.  Perhaps Adobe can do a bit better job in explaining this in their "Flex Data Visualization Developer's Guide".  It does seem weird that an AreaChart would have a separate property for the color rather than using the fill property used by the bar and column charts.

               

              Thanks for the help

               

              topher

              • 4. Re: Flex 3 chart fills
                msakrejda Level 4

                Ah, right, I'd forgotten about areaFill. Did you get line chart styling to work as well? I think that's the part I could never do to straight CSS (although I don't think I'd tried working with chartSeriesStyles).

                • 5. Re: Flex 3 chart fills
                  topher1120 Level 1

                  I haven't found how to via CSS, but was able to solve my specific problem using a Stroke object and setting the lineStroke property on the LineSeries object.  The lineStroke property looks like it can be used as a style, but I don't know how to reference or create objects within the CSS context.

                   

                  topher

                  • 6. Re: Flex 3 chart fills
                    msakrejda Level 4

                    Ok, I see. That's why I originally came up with the "unusual" approach in my blog post. I'll concede that that's probably not an appropriate approach for most situations.