RadChartView - Allocate specified margin for axis labels

1 Answer 128 Views
ChartView
Dimitrios
Top achievements
Rank 1
Dimitrios asked on 04 Apr 2023, 09:11 AM

I am using a RadChartView to display a bar chart with a vertical linear axis. I adjust the values in the bars such that sometimes the plotted range in between 0 - 99 (so the axis tick labels have two digits), and sometimes the plotted range is between 100 - 999 (so the axis labels have three digits).

When the maximum number of digits in the tick labels changes, the horizontal position of the Y axis is adjusted to accommodate the increased label size.

Presumably this problem would also arise if the font size of the labels is adjusted.

Is it possible to disable this behavior and allocate a specified "margin" size in which to place the axis labels? I would like the position of the vertical axis to be fixed within the control's area.

1 Answer, 1 is accepted

Sort by
0
Dinko | Tech Support Engineer
Telerik team
answered on 06 Apr 2023, 12:24 PM

Hi Dimitrios,

Thank you for your interest in our RadChartView component for WinForms.

This behavior is kind of expected. The View area of the chart contains all elements which you see: labels, axis, data points, series, legend, etc. When the label's text width changes the other elements' size will be adjusted to respect the changes. By default, the view area is offset with 40 px on all sides, controlled by the Margin property. If we set the area.View.Margin to 0 we can see how the view area occupies all available space.

CartesianArea area = this.radChartView1.GetArea<CartesianArea>();
area.View.Margin = new Padding(0);

If we leave it with its default value, we could use the Margin property to try to preserve the position of the left side.

private void radButton1_Click(object sender, EventArgs e)
{
    LinearAxis verticalAxis = (LinearAxis)this.radChartView1.Axes[1];

    if (!biggerNumber)
    {
        verticalAxis.Minimum = 100;
        verticalAxis.Maximum = 999;
        biggerNumber = true;
        CartesianArea area = this.radChartView1.GetArea<CartesianArea>();
        area.View.Margin = new Padding(34, 40, 40, 40);
    }
    else
    {
        CartesianArea area = this.radChartView1.GetArea<CartesianArea>();
        area.View.Margin = new Padding(40);
        var test = area.View.Margin;
        verticalAxis.Minimum = 10;
        verticalAxis.Maximum = 99;
        biggerNumber = false;
    }
}

I have prepared a sample project to demonstrate this approach. You can find it attached to this reply. When you run the project click several times on the button to observe the difference. 

Regards,
Dinko | Tech Support Engineer
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ChartView
Asked by
Dimitrios
Top achievements
Rank 1
Answers by
Dinko | Tech Support Engineer
Telerik team
Share this question
or