I have a requirement for displaying multiple charts side by side and share a common axis. Do you have any hints how I can implement this? I know I can display multiple series within a same chart. But in my case, the series should be laid out side by side, I think I should use multiple charts but somehow tie them to a common axis.
I attached a mock image to illustrate this problem.
1 Answer, 1 is accepted
0
Hello ,
The chart elements are visuals and they cannot be shared across different charts. Namely, the axis is a visual element, and when you set it as a HorizontalAxis (or VerticalAxis), the axis is added to the visual tree of the chart, so the axis cannot be reused with another chart.
In order to get the behavior you like you need to use a separate axis for each chart and ensure that the axes ranges are the same. This means that if you are using a LinearAxis you can simply sync all axes to have the same Minimum and Maximum. If you are using a CategoricalAxis, you need to ensure that all axes have the same categories, in the same order.
Let's say that the different charts present different series and they have different items sources. In general, you can assume that the categories differ in all sources. I will talk about categories because it is easier to explain. Let's say that one series has source x1, x2, x3, where another has source x1, x3, x4 and the third has x4, x2. Because the categories are not exactly the same, and not in the same order, if you wanted to sync the charts you need to do the following - create a dummy source that contains all categories x1, x2, x3, x4, in the order you need. You can then create an additional dummy series in each chart, and bind it to this source. Now we have ensured that the axes are synced. You can hide the dummy series by setting its Visibility to Hidden.
If you do this - you have done most of it. Remember to use the same type of axis in each chart, because different axes treat values differently and may plot in a different manner.
I can see that you will also need to collapse some of the axes and you may need to sync the size of the plot areas of the charts, so that the data is nicely aligned. You can take a look at this demo here, the ChartViewUtilities class and the ChartAlignmentGroup property. You will need to slightly rework the logic, because now it works for syncing the charts horizontally where you need a vertical alignment.
I hope this is helpful. Let us know if you need more information.
Regards,
Petar Marchev
Telerik by Progress
The chart elements are visuals and they cannot be shared across different charts. Namely, the axis is a visual element, and when you set it as a HorizontalAxis (or VerticalAxis), the axis is added to the visual tree of the chart, so the axis cannot be reused with another chart.
In order to get the behavior you like you need to use a separate axis for each chart and ensure that the axes ranges are the same. This means that if you are using a LinearAxis you can simply sync all axes to have the same Minimum and Maximum. If you are using a CategoricalAxis, you need to ensure that all axes have the same categories, in the same order.
Let's say that the different charts present different series and they have different items sources. In general, you can assume that the categories differ in all sources. I will talk about categories because it is easier to explain. Let's say that one series has source x1, x2, x3, where another has source x1, x3, x4 and the third has x4, x2. Because the categories are not exactly the same, and not in the same order, if you wanted to sync the charts you need to do the following - create a dummy source that contains all categories x1, x2, x3, x4, in the order you need. You can then create an additional dummy series in each chart, and bind it to this source. Now we have ensured that the axes are synced. You can hide the dummy series by setting its Visibility to Hidden.
If you do this - you have done most of it. Remember to use the same type of axis in each chart, because different axes treat values differently and may plot in a different manner.
I can see that you will also need to collapse some of the axes and you may need to sync the size of the plot areas of the charts, so that the data is nicely aligned. You can take a look at this demo here, the ChartViewUtilities class and the ChartAlignmentGroup property. You will need to slightly rework the logic, because now it works for syncing the charts horizontally where you need a vertical alignment.
I hope this is helpful. Let us know if you need more information.
Regards,
Petar Marchev
Telerik by Progress
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.