0 Replies Latest reply on Jun 17, 2010 11:33 PM by Addict1980

    Chart datatips appearance issue

    Addict1980

      Hello all,

       

      I'm working on a dashboard application with a lot of charts.
      Now I'm having a problem when showing multiple dataTips on a chart within a panel.
      The datatip is shown behind the text on the panel.

       

      Underneath a sample application to illustrate the problem:

      <?xml version="1.0"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
          <mx:Script>
              <![CDATA[          
                  import mx.collections.ArrayCollection;
                  
                  [Bindable]
                  private var medalsAC:ArrayCollection = new ArrayCollection( [
                      { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                      { Country: "USA x", Gold: 35, Silver:39, Bronze: 40 },
                      { Country: "USA y", Gold: 35, Silver:39, Bronze: 40 },
                      { Country: "USA z", Gold: 35, Silver:39, Bronze: 40 },                
                      { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                      { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
              ]]>
          </mx:Script>
          
          
          <mx:Style>
              DataTip {
                  backgroundColor: yellow;
                  color: white;
                  fontWeight: bold;
                  background-alpha: 1;
                  fontSize: 16;
              }
          </mx:Style>
      
          <mx:Panel
                    id="titlePanel"            
                    title="ColumnChart and BarChart Controls Example - ColumnChart and BarChart Controls Example - ColumnChart and BarChart Controls Example - ColumnChart and BarChart Controls Example - ColumnChart and BarChart Controls Example - ColumnChart and BarChart Controls Example - ColumnChart and BarChart Controls Example" 
                    height="100%" width="100%" layout="horizontal">
      
              <mx:ColumnChart id="column" 
                              height="100%" 
                              width="100%" 
                              paddingLeft="5" 
                              paddingRight="5" 
                              showDataTips="true"
                              showAllDataTips="true"
                              dataProvider="{medalsAC}"
                              >                
                  <mx:horizontalAxis>
                      <mx:CategoryAxis categoryField="Country"/>
                  </mx:horizontalAxis>
                  
                  <mx:series>
                      <mx:ColumnSeries 
                          xField="Country" 
                          yField="Gold" 
                          displayName="Gold"
                          />
                      <mx:ColumnSeries 
                          xField="Country" 
                          yField="Silver" 
                          displayName="Silver"
                          />
                      <mx:ColumnSeries 
                          xField="Country" 
                          yField="Bronze" 
                          displayName="Bronze"
                          />
                  </mx:series>
              </mx:ColumnChart>                    
          </mx:Panel>
      </mx:Application>
      

       

      I'm using Flex 3.5.

       

      Hope you can help me,

      Stijn