Multiple Tooltips are not showing up when hovering over overlapping chart items

Question

Hi!
I ran into a problem which I am unable to fix. Either I am missing something very obvious or this is a bug. I set up a LineChart with two series. One series has multiple overlapping data points, and both series overlap in one point.
Data tips are only getting displayed where the data points of the two different series overlap. Hovering over the overlapping points of a single series does not lead to multiple data tips being displayed. According to Flex SDK docs this should be possible.
Here's a simple example which shows the problem:
<?xml version = "1.0"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
                  xmlns:mx = "library://ns.adobe.com/flex/mx"
                  xmlns:s = "library://ns.adobe.com/flex/spark"
                  xmlns:local = "*">
     <fx:Script>
          <![CDATA[
               import mx.charts.HitData;
               import mx.collections.ArrayCollection;
               import mx.graphics.SolidColorStroke;
               [Bindable]
               private var values:ArrayCollection = new ArrayCollection([{date: new Date(2010, 10, 15), value:120},
                    {date: new Date(2010, 11, 15), value: 60},
                    {date: new Date(2011, 0, 15), value: 40},
                    {date: new Date(2011, 0, 30), value: 7},
                    {date: new Date(2011, 1, 15), value: 30},
                    {date: new Date(2011, 1, 18), value: 61},              
                    {date: new Date(2011, 1, 23), value: 80}]);
               [Bindable]
               private var values2:ArrayCollection = new ArrayCollection([{date: new Date(2010, 10, 15), value:120},
                    {date: new Date(2010, 11, 15), value: 200},
                    {date: new Date(2011, 0, 15), value: 29},
                    {date: new Date(2011, 0, 15, 13, 59, 99), value: 29},
                    {date: new Date(2011, 0, 15, 13, 58, 99), value: 29},
                    {date: new Date(2011, 0, 15, 13, 57, 99), value: 29.5},
                    {date: new Date(2011, 0, 15), value: 29.5},
                    {date: new Date(2011, 0, 15), value: 30},
                    {date: new Date(2011, 0, 15), value: 30.5},
                    {date: new Date(2011, 0, 15), value: 30.5},
                    {date: new Date(2011, 0, 15), value: 30.5},
                    {date: new Date(2011, 0, 15), value: 30},
                    {date: new Date(2011, 0, 15), value: 30},
                    {date: new Date(2011, 0, 15), value: 30},
                    {date: new Date(2011, 0, 15), value: 31},
                    {date: new Date(2011, 0, 15), value: 31},
                    {date: new Date(2011, 0, 30), value: 70},
                    {date: new Date(2011, 1, 15), value: 2},
                    {date: new Date(2011, 1, 18), value: 180},              
                    {date: new Date(2011, 1, 23), value: 80}]);
               [Bindable]
               private var minDate:Date = new Date(2010, 10, 1);
               [Bindable]
               private var maxDate:Date = new Date();
               private function getDataTip(hitData:HitData):String
                    return "<b>Tip:</b><br> Date: " + hitData.item.date + '<br>Value: ' + hitData.item.value;
          ]]>
     </fx:Script>
     <s:layout>
          <s:VerticalLayout/>
     </s:layout>
     <s:width>100%</s:width>
     <s:height>100%</s:height>
     <s:Panel title = "Chart Test">
          <s:width>100%</s:width>
          <s:height>100%</s:height>
          <s:layout>
               <s:VerticalLayout/>
          </s:layout>
          <mx:PlotChart id = "chart">
               <mx:width>100%</mx:width>
               <mx:height>100%</mx:height>
               <!-- Uncomment this in order to see that there are overlapping items -->
               <!-- mx:showAllDataTips>true</mx:showAllDataTips-->
               <mx:selectionMode>multiple</mx:selectionMode>
               <mx:dataTipMode>multiple</mx:dataTipMode>
               <mx:showDataTips>true</mx:showDataTips>
               <mx:dataTipFunction>getDataTip</mx:dataTipFunction>
               <mx:horizontalAxis>
                    <mx:DateTimeAxis minimum = "{minDate}"
                                         maximum = "{maxDate}"/>
               </mx:horizontalAxis>
               <mx:series>
                    <mx:LineSeries dataProvider = "{values}"
                                                  displayName = "Series 1"
                                                  yField = "value"
                                                  xField = "date"
                                                  interpolateValues = "true"
                                                  lineStroke = "{new SolidColorStroke(0x00FF00, 3, 0.5)}"
                                                  stroke = "{new SolidColorStroke(0x00FF00, 3, 0.5)}"
                                                  itemRenderer = "mx.charts.renderers.CircleItemRenderer"/>
                    <mx:LineSeries dataProvider = "{values2}"
                                                  displayName = "Series 2"
                                                  yField = "value"
                                                  xField = "date"
                                                  interpolateValues = "true"
                                                  lineStroke = "{new SolidColorStroke(0xFF0000, 3, 0.5)}"
                                                  stroke = "{new SolidColorStroke(0xFF0000, 3, 0.5)}"
                                                  itemRenderer = "mx.charts.renderers.CircleItemRenderer"/>
               </mx:series>
          </mx:PlotChart>
     </s:Panel>
</s:Application>
Any help is appreciated!
Thanks!

Answer 1

Hi!
I ran into a problem which I am unable to fix. Either I am missing something very obvious or this is a bug. I set up a LineChart with two series. One series has multiple overlapping data points, and both series overlap in one point.
Data tips are only getting displayed where the data points of the two different series overlap. Hovering over the overlapping points of a single series does not lead to multiple data tips being displayed. According to Flex SDK docs this should be possible.
Here's a simple example which shows the problem:
<?xml version = "1.0"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
                  xmlns:mx = "library://ns.adobe.com/flex/mx"
                  xmlns:s = "library://ns.adobe.com/flex/spark"
                  xmlns:local = "*">
     <fx:Script>
          <![CDATA[
               import mx.charts.HitData;
               import mx.collections.ArrayCollection;
               import mx.graphics.SolidColorStroke;
               [Bindable]
               private var values:ArrayCollection = new ArrayCollection([{date: new Date(2010, 10, 15), value:120},
                    {date: new Date(2010, 11, 15), value: 60},
                    {date: new Date(2011, 0, 15), value: 40},
                    {date: new Date(2011, 0, 30), value: 7},
                    {date: new Date(2011, 1, 15), value: 30},
                    {date: new Date(2011, 1, 18), value: 61},              
                    {date: new Date(2011, 1, 23), value: 80}]);
               [Bindable]
               private var values2:ArrayCollection = new ArrayCollection([{date: new Date(2010, 10, 15), value:120},
                    {date: new Date(2010, 11, 15), value: 200},
                    {date: new Date(2011, 0, 15), value: 29},
                    {date: new Date(2011, 0, 15, 13, 59, 99), value: 29},
                    {date: new Date(2011, 0, 15, 13, 58, 99), value: 29},
                    {date: new Date(2011, 0, 15, 13, 57, 99), value: 29.5},
                    {date: new Date(2011, 0, 15), value: 29.5},
                    {date: new Date(2011, 0, 15), value: 30},
                    {date: new Date(2011, 0, 15), value: 30.5},
                    {date: new Date(2011, 0, 15), value: 30.5},
                    {date: new Date(2011, 0, 15), value: 30.5},
                    {date: new Date(2011, 0, 15), value: 30},
                    {date: new Date(2011, 0, 15), value: 30},
                    {date: new Date(2011, 0, 15), value: 30},
                    {date: new Date(2011, 0, 15), value: 31},
                    {date: new Date(2011, 0, 15), value: 31},
                    {date: new Date(2011, 0, 30), value: 70},
                    {date: new Date(2011, 1, 15), value: 2},
                    {date: new Date(2011, 1, 18), value: 180},              
                    {date: new Date(2011, 1, 23), value: 80}]);
               [Bindable]
               private var minDate:Date = new Date(2010, 10, 1);
               [Bindable]
               private var maxDate:Date = new Date();
               private function getDataTip(hitData:HitData):String
                    return "<b>Tip:</b><br> Date: " + hitData.item.date + '<br>Value: ' + hitData.item.value;
          ]]>
     </fx:Script>
     <s:layout>
          <s:VerticalLayout/>
     </s:layout>
     <s:width>100%</s:width>
     <s:height>100%</s:height>
     <s:Panel title = "Chart Test">
          <s:width>100%</s:width>
          <s:height>100%</s:height>
          <s:layout>
               <s:VerticalLayout/>
          </s:layout>
          <mx:PlotChart id = "chart">
               <mx:width>100%</mx:width>
               <mx:height>100%</mx:height>
               <!-- Uncomment this in order to see that there are overlapping items -->
               <!-- mx:showAllDataTips>true</mx:showAllDataTips-->
               <mx:selectionMode>multiple</mx:selectionMode>
               <mx:dataTipMode>multiple</mx:dataTipMode>
               <mx:showDataTips>true</mx:showDataTips>
               <mx:dataTipFunction>getDataTip</mx:dataTipFunction>
               <mx:horizontalAxis>
                    <mx:DateTimeAxis minimum = "{minDate}"
                                         maximum = "{maxDate}"/>
               </mx:horizontalAxis>
               <mx:series>
                    <mx:LineSeries dataProvider = "{values}"
                                                  displayName = "Series 1"
                                                  yField = "value"
                                                  xField = "date"
                                                  interpolateValues = "true"
                                                  lineStroke = "{new SolidColorStroke(0x00FF00, 3, 0.5)}"
                                                  stroke = "{new SolidColorStroke(0x00FF00, 3, 0.5)}"
                                                  itemRenderer = "mx.charts.renderers.CircleItemRenderer"/>
                    <mx:LineSeries dataProvider = "{values2}"
                                                  displayName = "Series 2"
                                                  yField = "value"
                                                  xField = "date"
                                                  interpolateValues = "true"
                                                  lineStroke = "{new SolidColorStroke(0xFF0000, 3, 0.5)}"
                                                  stroke = "{new SolidColorStroke(0xFF0000, 3, 0.5)}"
                                                  itemRenderer = "mx.charts.renderers.CircleItemRenderer"/>
               </mx:series>
          </mx:PlotChart>
     </s:Panel>
</s:Application>
Any help is appreciated!
Thanks!