Match multiple charts Y-Axis width

[Antoniy]

Hello everybody,

I've got a scenario very similar to the example here (http://demos.telerik.com/silverlight/#ChartView/Financial), where two charts are displaying the same time interval (as the price and volume in the example) and I'd like to make their steps/ticks match. However, the problem is that because of the different values in their Y-Axis, their (axis) width is different and so the charts points do not match as the drawing space is not the same.

I've tried using LabelStyle property to set MinWidth but there was no result. Also tried setting constant Width and HorizontalAlignment.Right but the labels were still left aligned. Also tried setting MinWidth and Width on the telerik:LinearAxis element itself but there was also no result.

How can I make both charts' Y-axis share the same non-constant width, i.e. the smaller one to automatically extends to the bigger one's width.

Thanks.

[Evgenia]

Hello Antoniy,

 It's strange that you didn't get the result you required via LabelStyle. In order to have your charts aligned equally, you need to set a fixed width for their Linear Axis labels. The following works as expected on my side:

<UserControl.Resources>

    <Style TargetType="TextBlock" x:Key="LinearAxisLabelStyle">
        <Setter Property="Width" Value="50"/>
        <Setter Property="TextAlignment" Value="Right"/>
    </Style>

</UserControl.Resources>

<!--...-->
<telerik:RadCartesianChart>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis LabelStyle="{StaticResource LinearAxisLabelStyle}"/>
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis />
    </telerik:RadCartesianChart.HorizontalAxis>
<!-- your series here -->
</telerik:RadCartesianChart>

Regards,
Evgenia
Telerik

[Antoniy]

Hello Evgenia,
I did get it working with LabelStyle after writing that post, I was wrongfully setting HorizontalAlignment instead of TextAlignment.
Although this solution is working, it's not complete as it uses constant values for the Width or for the MinWidth as in my case and that's not universal because I don't know what number will show up in the axis tomorrow and I certainly don't want to leave giant empty white space for that reason.
So I tried providing custom LabelTemplate with TextBlock in it and hooked to its SizeChanged event.
The problem is that shorter labels have narrower width. I tried taking the width from some parent but the first two, the ContentPresenter and the Canvas have the same sizes and the next parent has no Width at all, so I can't get accurate width of something to bind something's width from the other chart to it.

I'll stick to the "hard-coded" version for the moment, but I'd like someone to share a solution that works with no constants.

Thanks.

[Evgenia]

Hello Antoniy,

 This is a rather complex task and unfortunately there's no applicable workaround for it.
I realize that you can have strings of variable length in your charts. My advice is to use Wrapping together with the hardcoded Width to a value of you choice, for instance, 50. Then when you have a string of several words of a total length 80, it will fit the first couple of words which fit into 50 and rest will be on the next line.

Regards,
Evgenia
Telerik