DateTimeContinuousAxis outside of Charts?

2 posts, 0 answers
  1. Nathan
    Nathan avatar
    3 posts
    Member since:
    Aug 2016

    Posted 27 Oct Link to this post

    I have multiple charts stacked on top of each other that all share the same DateTime on the X-Axis. Is it possible to hide all the x-axes on the individual charts and have 1 x-axis control at the bottom using a DateTimeContinuousAxis?
  2. Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    138 posts

    Posted 28 Oct Link to this post

    Hi Nathan,

    The Axis isn't "detachable", however you can still achieve what you're looking for by hiding the axis on the top charts and leaving the bottom chart's in place.

    To hide the axis, you can set the Visibility property like this:

    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:DateTimeContinuousAxis Visibility="Collapsed" />
    </telerik:RadCartesianChart.HorizontalAxis>


    As an example, here 4 ChartViews within a StackPanel. Only the bottom ChartView has it's horizontal axis visible. See the attached screenshot of the code at runtime.

    Just keep in mind that you may need to adjust the margins of the charts that do not have the hidden axis so that they align with the bottom chart. This is because the first and last label of the horizontal axis adds some padding.


    Here is the code:
    <StackPanel>
        <telerik:RadCartesianChart Margin="7,0,30,0">
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis Visibility="Collapsed" />
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis />
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.Series>
                <telerik:LineSeries Stroke="Red"
                                    ItemsSource="{Binding ChartItems}"
                                    ValueBinding="Value"
                                    CategoryBinding="Date" />
            </telerik:RadCartesianChart.Series>
        </telerik:RadCartesianChart>
     
        <telerik:RadCartesianChart Margin="7,0,30,0">
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis Visibility="Collapsed" />
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis />
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.Series>
                <telerik:LineSeries Stroke="Black"
                                    ItemsSource="{Binding ChartItems}"
                                    ValueBinding="Value"
                                    CategoryBinding="Date" />
            </telerik:RadCartesianChart.Series>
        </telerik:RadCartesianChart>
     
        <telerik:RadCartesianChart Margin="7,0,30,0">
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis Visibility="Collapsed" />
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis />
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.Series>
                <telerik:LineSeries Stroke="Green"
                                    ItemsSource="{Binding ChartItems}"
                                    ValueBinding="Value"
                                    CategoryBinding="Date" />
            </telerik:RadCartesianChart.Series>
        </telerik:RadCartesianChart>
     
        <telerik:RadCartesianChart x:Name="ChartWithVisibleAxis">
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis LabelFormat="MMM yyyy" />
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis />
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.Series>
                <telerik:LineSeries Stroke="Orange"
                                    ItemsSource="{Binding ChartItems}"
                                    ValueBinding="Value"
                                    CategoryBinding="Date" />
            </telerik:RadCartesianChart.Series>
        </telerik:RadCartesianChart>
    </StackPanel>


    Let us know if you have any further questions.


    Regards,
    Lance | Tech Support Engineer, Sr.
    Telerik by Progress
    Do you need help with upgrading your WPF project? Try the Telerik API Analyzer and share your thoughts!
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top