Preserve space for axis

[Michael]

We have chart with multiple series which can be dynamically added and removed. There are two types of series (basically values have different units), so there are two corresponding vertical axis (left and right). But right axis is not shown unless appropriate series are added. This setup works great.

There is one small issue. If right axis is visible, it changes size of chart area. Is it possible to preserve space for right axis even if there are no series for it?

Thanks, Michael

[Pavel R. Pavlov]

Hi,

The width that a vertical axis needs is determined by the length of its labels. This means that you can try defining the LableTemplate with fixed Width. This will ensure that the Axis always takes the same amount of pixels of your screen. I am not sure how exactly you add and remove the series this is why I would suggest using something like this:

<telerik:LinearAxis.LabelTemplate>
    <DataTemplate>
        <TextBlock Width="80"
                   Text="{Binding }" />
    </DataTemplate>
</telerik:LinearAxis.LabelTemplate>

Please give this approach a try and let us know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik

 

 

[Michael]

Thank you, but we already have set fixed width for vertical axis. It's an issue.

What we need is to always have space reserved for vertical axis.

More detailed example to help you understand the issue:

1. There are 2 series, 1st uses left vertical axis, 2nd uses right vertical axis.

2. User can add/remove these 2 series to/from chart.  (by clicking check boxes, for example)

3. When 1st series is added, chart looks like this (if you look left to right): "Vertical Axis / Chart Area"

4. When 2nd series is added: "Chart Area / Vertical Axis"

5. And when both are added:  "Vertical Axis / Chart Area / Vertical Axis"

What we need is in case of p.3 and p.4 to have:

"Vertical Axis / Chart Area / Space" and "Space / Chart Area / Vertical Axis" with space width equal to axis width.

How can it be achieved?

 

Thanks, Michael

[Pavel R. Pavlov]

Hi Michael,

Thank you for clarifying your requirement. I understand what you need to implement. Unfortunately, this is not supported out of the box by our RadCartesianChart component. The axis is removed along with the corresponding series in the same dynamic manner which causes all other visual elements of the charting component to be resized.

On the other hand, the length of the labels of an axis depends on the data of the series. This makes hard to determine in advance exactly how long the labels will be so that we could reserve space. This is why all visual elements are dynamically resized when new series and/or axis is added or removed.

However, there are some custom implementations that you can try out if you insist changing the default behavior of the charting component.

If all the data of all series is know at the moment of loading your application and users control only the visibility of the separate series using those checkboxes you can try the following. You can load all series in the RadCartesianChart and then try binding the Opacity property of the series itself and the corresponding Axis to the respective checkbox.

If the data is not known when your application is started you can try preserving the space that your labels will take with the Margin property of the RadCartesianChart. Let me give you an example to clarify.
Lets say you know that the longest label of your series is 100 pixels in width. Your series is still not populated with data this is why you cannot load it in prior of application start. This is why you can set 100 pixels Margin of the right side of the RadCartesianChart (Margin="0 0 100 0"). This will reserve the needed space for your labels. At the moment when you need to add the corresponding series, you should set the Margin of the chart back to 0 this should result in visualizing the series along with the axis with no resizing of the rest of the visual elements.

Please be noted that this approach has many drawbacks and this is why it is not recommended to implement it in your real life application. It is better to leave the RadCartesianChart to dynamically adjust the size of its series and axis.

Regards,
Pavel R. Pavlov
Telerik

 

 

[Michael]

I was interested whether there is some out of the box solution. I go with Margin property solution and fixed axis width. All this is necessary because we have 2 charts, one at the top and another one at the bottom; and their chart areas should correspond to each other.

Thank you for your suggestions!