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

No separation between second axis and first axis label

9 Answers 83 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Terry
Top achievements
Rank 1
Terry asked on 11 Apr 2012, 07:02 PM
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.

9 Answers, 1 is accepted

Sort by
0
Peshito
Telerik team
answered on 12 Apr 2012, 12:29 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Terry
Top achievements
Rank 1
answered on 12 Apr 2012, 04:38 PM
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.
0
Peshito
Telerik team
answered on 17 Apr 2012, 12:28 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Terry
Top achievements
Rank 1
answered on 17 Apr 2012, 02:35 PM
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.
0
Peshito
Telerik team
answered on 20 Apr 2012, 09:07 AM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Terry
Top achievements
Rank 1
answered on 20 Apr 2012, 07:19 PM
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?
0
Peshito
Telerik team
answered on 25 Apr 2012, 11:28 AM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Terry
Top achievements
Rank 1
answered on 25 Apr 2012, 04:54 PM
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.

0
Peshito
Telerik team
answered on 30 Apr 2012, 07:29 AM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
ChartView
Asked by
Terry
Top achievements
Rank 1
Answers by
Peshito
Telerik team
Terry
Top achievements
Rank 1
Share this question
or