DateTimeContinuousAxis outside of Charts?

[Nathan]

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?

[Lance | Manager Technical Support]

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