Tooltips being cut off when bar to large

[Steven]

Hello,

In my current project I have created a bar chart that is inside of a grid object.  Of course, the Y axis of this bar chart changes depending on the series that the chart was given.  All of this is great and works exactly how I would expect.  In addition, I also have enabled tool tips on this Bar Chart.  The tool tips show up at the top of the bars, where I would like them to. 

The exact issue is that I am facing is when the bar is too big (near max Y value), the tool tip gets cut off by the top of the chart area.  I really don't know what the best way to handle this problem is.  Is there a way to tell the Y Axis to be a little bigger if the number is within a certain % of the top?  Is there a way to have some sort of margin, that the chart cannot use, but the tool tip can still show up? 

Any help would be greatly appreciated here as I am getting close to the projects end date and really need to figure out an answer on this before the project closes, or the project will be left with a major bug, and that is never a good thing.

Thanks a ton.

[Giuseppe]

Hello Steven,

RadChart does support automatic extension of the numeric axis range via the LinearAxis.RangeExtendDirection property but generally the default value of this property is set to NumericalAxisRangeExtendDirection.Both so the control should automatically extend the axis range with one step out-of-the-box (unless you have specified LinearAxis.Maximum property value):

<!-- axis range automatically extended to 110 -->
<telerik:RadCartesianChart PaletteName="DefaultDark">
    <telerik:RadCartesianChart.Behaviors>
        <telerik:ChartTooltipBehavior>
            <telerik:ChartTooltipBehavior.ContentTemplate>
                <DataTemplate>
                    <Border Background="White" Padding="10">
                        <TextBlock Foreground="Black" Text="{Binding}" />
                    </Border>
                </DataTemplate>
            </telerik:ChartTooltipBehavior.ContentTemplate>
        </telerik:ChartTooltipBehavior>
    </telerik:RadCartesianChart.Behaviors>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis />
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis />
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:BarSeries>
        <telerik:BarSeries.DataPoints>
            <charting:CategoricalDataPoint Category="A" Value="95" />
            <charting:CategoricalDataPoint Category="B" Value="91" />
            <charting:CategoricalDataPoint Category="C" Value="99" />
            <charting:CategoricalDataPoint Category="D" Value="12" />
        </telerik:BarSeries.DataPoints>
    </telerik:BarSeries>
</telerik:RadCartesianChart>

Could you confirm that you have not hardcoded the axis maximum for your chart and that you are observing the described behavior with this code snippet on your end as well?

Alternatively, you can specify top margin for the chart control as well (note we have set the LinearAxis.RangeExtendDirection to "None" to illustrate the benefit of the margin here):

<!-- top margin compensates for not extending the range -->
<telerik:RadCartesianChart PaletteName="DefaultDark" Margin="0,60,0,0">
    <telerik:RadCartesianChart.Behaviors>
        <telerik:ChartTooltipBehavior>
            <telerik:ChartTooltipBehavior.ContentTemplate>
                <DataTemplate>
                    <Border Background="White" Padding="10">
                        <TextBlock Foreground="Black" Text="{Binding}" />
                    </Border>
                </DataTemplate>
            </telerik:ChartTooltipBehavior.ContentTemplate>
        </telerik:ChartTooltipBehavior>
    </telerik:RadCartesianChart.Behaviors>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis />
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis RangeExtendDirection="None" />
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:BarSeries>
        <telerik:BarSeries.DataPoints>
            <charting:CategoricalDataPoint Category="A" Value="95" />
            <charting:CategoricalDataPoint Category="B" Value="91" />
            <charting:CategoricalDataPoint Category="C" Value="99" />
            <charting:CategoricalDataPoint Category="D" Value="12" />
        </telerik:BarSeries.DataPoints>
    </telerik:BarSeries>
</telerik:RadCartesianChart>

The third option would be to set the ChartTooltipBehavior.SnapToClosestPoint property to false but then the tooltip will not be visualized over the bars but close to the actual tap/mouse hover location.

Hope this helps.


All the best,
Giuseppe
the Telerik team

[Rohan]

Hi,
 I need to show the tooltip of the data instead of the DataPoints, I am fetching the same while binding the dataPoints or can I use WCF to be called for showing the tooltip.
Thanks

[Ivaylo Gergov]

Hi Rohan,

Can you please clarify what do you mean by - tooltip of the data instead of the datapoints?
ChartToolTip is displayed per DataPoint by design. You can customize the tooltip content by using the ChartToolTipBehavior.ContentTemplate property and set custom DataTemplate. Additionally you can extract information from each datapoint as the DataContext of the behavior is a DataPointInfo object which has DataPoint and Series properties (additionally each data point holds a reference to its corresponding business object via DataPoint.DataItem property so you can visualize any property value from your business object). Here's an example of direct binding to data point property:

<telerik:RadCartesianChart.Behaviors>
     <telerik:ChartTooltipBehavior>
         <telerik:ChartTooltipBehavior.ContentTemplate>
             <DataTemplate>
                         <TextBlock Text="{Binding DataPoint.Category}"/>
             </DataTemplate>
         </telerik:ChartTooltipBehavior.ContentTemplate>
     </telerik:ChartTooltipBehavior>
 </telerik:RadCartesianChart.Behaviors>

Here's an example of binding to an additional property of your business object:

<telerik:RadCartesianChart.Behaviors>

     <telerik:ChartTooltipBehavior>

         <telerik:ChartTooltipBehavior.ContentTemplate>

             <DataTemplate>                         

                         <TextBlock Text="{Binding DataPoint.DataItem.CustomPropertyNotUsedByChartOtherwise}"/>                 


             </DataTemplate>

         </telerik:ChartTooltipBehavior.ContentTemplate>

     </telerik:ChartTooltipBehavior>

 </telerik:RadCartesianChart.Behaviors>

I hope this helps.

 

Kind regards,
Ivaylo Gergov
the Telerik team