This is a migrated thread and some comments may be shown as answers.

ChartTrackBallBehavior hide/cover chart

3 Answers 80 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Stanislav
Top achievements
Rank 1
Stanislav asked on 11 Dec 2018, 03:08 PM

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

 

3 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 14 Dec 2018, 08:23 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Stanislav
Top achievements
Rank 1
answered on 17 Dec 2018, 10:50 AM

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>     
0
Martin Ivanov
Telerik team
answered on 17 Dec 2018, 11:30 AM
Hello Stanislav,

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

Regards,
Martin Ivanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ChartView
Asked by
Stanislav
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Stanislav
Top achievements
Rank 1
Share this question
or