No separation between second axis and first axis label

[Terry]

Why is there no separation between the second vertical axis and the label for the first vertical axis (see attached image)?

Could you please provide a code example of the easiest way to get some separation.

[Peshito]

Hi Terry,

Have you applied any styles to your additional axes? If this is so, you could try setting a margin to the axis textblock which would work for you. if this does not help, a sample runnable project isolating this behavior would help us provide you with a better solution.

Regards,
Peshito
the Telerik team

[Terry]

I haven't applied styles to the additional axes.

The following code will show the behavior. Chart is the name of the RadCartesianChart.

namespace SampleChartNoSeparationAxes
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Chart_Loaded(object sender, RoutedEventArgs e)
        {
            DateTimeContinuousAxis xAxis = new DateTimeContinuousAxis();
            xAxis = new DateTimeContinuousAxis();
            xAxis.LabelFitMode = Telerik.Charting.AxisLabelFitMode.MultiLine;
            xAxis.LabelFormat = "HH:mm:ss.f";
            xAxis.MaximumTicks = 10;
            xAxis.PlotMode = Telerik.Charting.AxisPlotMode.OnTicks;
            Chart.HorizontalAxis = xAxis;
            Chart.Grid = new CartesianChartGrid();
            Chart.Grid.MajorLinesVisibility = GridLineVisibility.XY;

            for (int i = 0; i < 2; ++i)
            {
                SolidColorBrush brush = new SolidColorBrush(Colors.Blue);
                LineSeries series = new LineSeries();
                StringToDataPointBindingConverter converter = new StringToDataPointBindingConverter();
                series.ValueBinding = converter.ConvertFromString("Value") as DataPointBinding;
                series.CategoryBinding = converter.ConvertFromString("Date") as DataPointBinding;
                series.Stroke = brush;
                LinearAxis yAxis = new LinearAxis();
                double lowerLimit = 0;
                double upperLimit = 100;
                double limitRange = 25;
                yAxis.Minimum = lowerLimit - limitRange;
                yAxis.Maximum = upperLimit + limitRange;
                yAxis.MajorStep = limitRange;
                yAxis.Title = "Unit" + i.ToString();
                yAxis.HorizontalLocation = AxisHorizontalLocation.Left;
                series.VerticalAxis = yAxis;
                if (Chart.VerticalAxis == null)
                    Chart.VerticalAxis = series.VerticalAxis;
                Chart.Series.Add(series);
            }
        }
    }
}

I could send you the sample runnable project but you don't allow zip files as an attachment.

[Peshito]

Hello,

Thank you for the sample provided.

Could you try using the axis' Margin property. Setting the Left Margin to 5 for example will make enough space so the second axis and the first axis label are not so close.
Here is a sample code below in xaml:

<telerik:LineSeries.VerticalAxis>
    <telerik:LinearAxis HorizontalLocation="Left" Margin="5,0,0,0" Title="First" />
</telerik:LineSeries.VerticalAxis>

and in code behind:

(Chart.Series[0].VerticalAxis as LinearAxis).Margin = new Thickness(5, 0, 0, 0);

Hope this helps.

All the best,
Peshito
the Telerik team

[Terry]

Setting the left margin as in your sample code does nothing to separate the axes. The only noticeable effect is to extend the x-axis line to the left through the y-axis label. The attachment shows the result with the left margin set to 100.

[Peshito]

Hello,

Please, find attached a sample project demonstrating setting a margin to your first axis which result in a small space distance between both axes. I have also set margins to the horizontal axis and both series in order to make the chart look consistent. You should also know that setting margins might lead to clipping off some chart's elements, so you might try different margin values in order to most properly display the chart.

Greetings,
Peshito
the Telerik team

[Terry]

Hi Peshito,

While setting a margin to the first y-axis in your sample project works, if you try the same thing to the sample code I provided it does not work. Could this be due to the fact that in your sample project everything is defined in XAML whereas in my sample everything is created in code? If so is there a way to get separation when everything is created in code?

[Peshito]

Hi Terry,

Please find attached a modified copy of the earlier attached sample project. I declared everything in code behind and I could not reproduce this issue. Could you please try to modify it so the issue become reproducible or attach a runnable copy of yours, so we could further investigate what is causing the difference and give you an appropriate solution.

Kind regards,
Peshito
the Telerik team

[Terry]

Hi Peshito,

It turns out that applying the margin in my code was making a difference but no separation between axes since the margin was being applied to each axis causing them both to shift to the right. You only applied it to the first axis causing only the first axis to shift to the right and providing some separation.

Setting the margin is not really a solution as the axis is actually being shifted over top of the plotting area. If three axes were being used then the first would need to have a left margin of 10 and the second a left margin of 5 resulting in the plotted line extending to the left of the first axis (see attached picture). As well, there doesn't seem to be a similar thing that can be done if the axes are on the right of the chart.

[Peshito]

Hello Terry,

Right now setting a margin to each axis or element is the only way to achieve similar scenario. You can apply margin to your series and XAxis as well. We are working on improving this limitation, however I cannot give you a specific time frame when it would be fixed.

Kind regards,
Peshito
the Telerik team