2 Replies Latest reply on Mar 1, 2012 9:16 PM by _willCrain

    Chart component Skinning?

    _willCrain

      I would like to skin/alter the appearance of the component charts in flash builder.

       

      Examples being:

      Line chart, add larger bullets/circles to give more of a defined point along the line

       

      Bar Chart: make the end of the bar rounded

       

      for all charts alter the x/y label styles (colors, font, remove the default pale blue boxes)

       

      If anyone could shed some light on how to do this or point me to a tutorial that would be appreciated.

       

      Thanks

        • 1. Re: Chart component Skinning?
          Deeptika Gottipati Adobe Employee

          Hi,

           

          Charts can be skinned using styles on series and chart elements.

           

          In line chart, "radius" property on LineSeries can be used to make the data points larger but that would need you to specify itemRenderer first for that series.

          ex: <mx:LineSeries radius="40" yField="Profit" form="curve" displayName="Profit" itemRenderer="mx.charts.renderers.BoxItemRenderer"/>

           

          shows boxes with radius 40

           

          There is no property at present that directly rounds the corners of a bar. But one can create a custom item renderer that does rounding and can use it for bar chart instead of default BoxItemRenderer

           

          Axis apperance can be changed by specifying styles on AxisRenderer.

          For ex: not to show pale blue boxes, set "showLine" to false.

          To change color of labels, set "color" style

          To change font size of labels, set "fontSize" style.

           

          Ex:

                  <mx:verticalAxis>

                      <mx:CategoryAxis dataProvider="{chartData}" categoryField="Month" id="c1"/>

                  </mx:verticalAxis>

                 <mx:verticalAxisRenderers>

                      <mx:AxisRenderer axis="{c1}" showLine="false" color="0x654321" fontSize="20"/>

                  </mx:verticalAxisRenderers>

           

          http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/package-detai l.html helps you get more details on available styles in flex chart components and their usage.

           

          Thanks,

          Deeptika

          • 2. Re: Chart component Skinning?
            _willCrain Level 1

            Thanks for the reply, Deeptika. Would you know how I can customize the DataTips? I want to make them look more like a 'talk bubble'. Would i need to set up a custom itemRenderer? how would i apply that.

             

            thanks again.

             

            will