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

DateTimeContinuousAxis outside of Charts?

1 Answer 42 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Nathan
Top achievements
Rank 1
Nathan asked on 27 Oct 2016, 12:51 PM
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?

1 Answer, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 28 Oct 2016, 04:57 PM
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!
Tags
Chart
Asked by
Nathan
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
Share this question
or