ChartTrackBallBehavior hide/cover chart

[Stanislav]

Hi Telerik,

Can you advice me how to handle my issue with ChartTrackBallBehavior. As you can see in attached image, ChartTrackBallBehavior  hides chart itself. I would like to know what is my options to solve this issue?

Is it possible to change position of ChartTrackBallBehavior when it start hiding chart?

My another idea is change vertical range so tracking ball will be always above chart. telerik:LinearAxis has Maximum property. I would like to stay with auto calculated range and just increase it about 20%. Is there some way how to achieve this? This is my current axes definition:

 

<telerik:RadCartesianChart.VerticalAxis>

                        <telerik:LinearAxis MajorStep="100" SmartLabelsMode="SmartStepAndRange" />
</telerik:RadCartesianChart.VerticalAxis>

 

Thanks,

Vaclav

 

[Martin Ivanov]

Hello Vaclav,

I can suggest you a few approaches to resolve this. 

• Option 1: Extend the axis range as you are already mentioned. In this case there should be enough space for the trackball. You can do this using the Maximum property of the axis.
  
  
• Option 2: Add some padding on top of the chart and offset the trackball info control some pixels to the top so it goes outside of the plot area. To do this, set the Margin of the TrackBallInfoControl via the TrackBallInfoStyle property of the chart. In order to avoid clipping the trackball info, set the ClipToBounds of the chart to False. Here is a runnable example in XAML:
  

  <Grid>
      <telerik:RadCartesianChart Margin="50" ClipToBounds="False">
          <telerik:RadCartesianChart.VerticalAxis>
              <telerik:LinearAxis/>
          </telerik:RadCartesianChart.VerticalAxis>
          <telerik:RadCartesianChart.HorizontalAxis>
              <telerik:CategoricalAxis/>
          </telerik:RadCartesianChart.HorizontalAxis>
          <telerik:AreaSeries>
              <telerik:AreaSeries.DataPoints>
                  <telerik:CategoricalDataPoint Value="0.5"/>
                  <telerik:CategoricalDataPoint Value="1.0"/>
                  <telerik:CategoricalDataPoint Value="0.7"/>
                  <telerik:CategoricalDataPoint Value="0.5"/>
                  <telerik:CategoricalDataPoint Value="1.0"/>
                  <telerik:CategoricalDataPoint Value="0.7"/>
              </telerik:AreaSeries.DataPoints>
          </telerik:AreaSeries>
          <telerik:RadCartesianChart.Behaviors>
              <telerik:ChartTrackBallBehavior />
          </telerik:RadCartesianChart.Behaviors>
          <telerik:RadCartesianChart.TrackBallInfoStyle>
              <Style TargetType="chartView:TrackBallInfoControl">
                  <Setter Property="Margin" Value="0 -50 0 0" />
              </Style>
          </telerik:RadCartesianChart.TrackBallInfoStyle>
          <telerik:RadCartesianChart.PlotAreaStyle>
              <Style TargetType="Border">
                  <Setter Property="Background" Value="Bisque"/>
              </Style>
          </telerik:RadCartesianChart.PlotAreaStyle>
      </telerik:RadCartesianChart>
  </Grid>

• Option 3: Consider using alternative visualization. For example, hide the trackball info and leave only the line. Then on the TrackInfoUpdated event of the ChartTrackBallBehavior get the data and show it in a separate view positioned next to the chart.

Regards,
Martin Ivanov
Progress Telerik

[Stanislav]

Thanks,

I go with option 2 - good idea. I attached image for others to see result.

And may be this will help someone - I am using NoXaml dll so I added BasedOn

<telerik:RadCartesianChart.TrackBallInfoStyle>
    <Style TargetType="telerik:TrackBallInfoControl" BasedOn="{StaticResource TrackBallInfoControlStyle}">
        <Setter Property="Margin" Value="0 -55 0 0" />
    </Style>
</telerik:RadCartesianChart.TrackBallInfoStyle>

[Martin Ivanov]

Hello Stanislav,

It is great to hear that this worked for you. And thank you for sharing your solution.

Regards,
Martin Ivanov
Progress Telerik