Shared axes with chart area size aligned

Is your feature request related to a problem? Please describe. When using Shared Axes, if chart1 Y-axis label is longer than chart2 Y-axis label, then X-axis labels will not align.

Steps to reproduce the behaviour:

1. Go to Shared Axes ViewModel.cs

• Change:

            for (var i = 0; i < 100; i++)
            {
                t += r.Next(-90, 100);
                values[i] = t;

                t2 += r.Next(-90, 100);
                values2[i] = t2;
            }

• To:

            for (var i = 0; i < 100; i++)
            {
                t += r.Next(10000, 100000);
                values[i] = t;

                t2 += r.Next(-90, 100);
                values2[i] = t2;
            }

• Add DrawMarginFrame to help make the problem more visible.

        public DrawMarginFrame DrawMarginFrame1 => new DrawMarginFrame
        {
            Fill = new SolidColorPaint(new SKColor(220, 220, 220)),
            Stroke = new SolidColorPaint(new SKColor(180, 180, 180), 2)
        };  

        public DrawMarginFrame DrawMarginFrame2 => new DrawMarginFrame
        {
            Fill = new SolidColorPaint(new SKColor(220, 220, 220)),
            Stroke = new SolidColorPaint(new SKColor(180, 180, 180), 2)
        };  

1. Go to SharedAxes View.xaml and add DrawMarginFrame to both charts:

        <lvc:CartesianChart
            Grid.Row="0"
            Series="{Binding SeriesCollection1}"
            XAxes="{Binding SharedXAxis}"
            DrawMarginFrame="{Binding DrawMarginFrame1}"
            ZoomMode="X">
        </lvc:CartesianChart>
        <lvc:CartesianChart
            Grid.Row="1"
            Series="{Binding SeriesCollection2}"
            XAxes="{Binding SharedXAxis}"
            DrawMarginFrame="{Binding DrawMarginFrame2}"
            ZoomMode="X">

1. Run sample

Describe the solution you’d like An option should be added to synchronise the chart area width for multiple charts. There may be occasion where the current behaviour is desirable so it should be configurable. The chart with the smallest chart area width would become the reference that the other charts are aligned to.

Current behaviour screenshot is shown below:

Desktop (please complete the following information): OS: Windows 10 PRO Version: Beta 70

[beto-rodriguez]

@Platonenkov use the Axis.Padding property, I know it is a bit complicated now, there will be better solutions in the future.

[Platonenkov]

I have right margin

            var axisT = YAxesTop.First() as Axis;
            var axisB = YAxesBottom.First() as Axis;
            var sizeT = axisT.GetPossibleSize((CartesianChart<SkiaSharpDrawingContext>)TopChart.CoreChart);
            var sizeB = axisB.GetPossibleSize((CartesianChart<SkiaSharpDrawingContext>)BottomChart.CoreChart);
            
            LabelWidth = sizeT.Width > sizeB.Width ? sizeT.Width : sizeB.Width;

            DrawMargin = new Margin(Margin.Auto, Margin.Auto, LabelWidth, Margin.Auto);

the graph indents are the same, there is no problem with them now.

Indentation size problem for label

---

solution in 2 stages:

1. Set AXIS with 0 padding, and calculate new padding

        private void CalculateMargin()
        {
            var axisT = YAxesTop.First() as Axis;
            var axisB = YAxesBottom.First() as Axis;
            var sizeT = axisT.GetPossibleSize((CartesianChart<SkiaSharpDrawingContext>)TopChart.CoreChart);
            var sizeB = axisB.GetPossibleSize((CartesianChart<SkiaSharpDrawingContext>)BottomChart.CoreChart);

            LabelWidth = sizeT.Width > sizeB.Width ? sizeT.Width : sizeB.Width;
            DifferenceOfWidth = (sizeT.Width - sizeB.Width);

            DrawMargin = new Margin(Margin.Auto, Margin.Auto, LabelWidth, Margin.Auto);
        }

1. recalculate the AXIS with the calculated padding

            var top_graph_padding = new LiveChartsCore.Drawing.Padding(0, 0, 5 + (DifferenceOfWidth < 0 ? Math.Abs(DifferenceOfWidth) : 0), 0);
            var bottom_graph_padding = new LiveChartsCore.Drawing.Padding(0, 0, 5 + (DifferenceOfWidth > 0 ?Math.Abs(DifferenceOfWidth) : 0), 0);