I'm trying to build an financial chart using live charts but i want to have two charts that either share x-axis or have the x-axis synced. Im currently trying to have two charts with synced x-axis but running to trouble because of axis label width of the main chart, see the picture below.
I tried to subtract the axis label width from the secondary chart but that property is always 0 :(
private void Grid_LayoutUpdated(object sender, EventArgs e)
{
var axisWidth = MainChart.AxisY[1].ActualWidth; //always 0 :(
IndicatorChart.Width -= axisWidth;
}
Anyone has any idea how to solve this with livecharts? Thanks in advance! 
here's the XAML:
<UserControl x:Class="TradeChart.GearedExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:TradeChart"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
xmlns:geared="clr-namespace:LiveCharts.Geared;assembly=LiveCharts.Geared"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid LayoutUpdated="Grid_LayoutUpdated" Loaded="Grid_Loaded">
<Grid.RowDefinitions>
<RowDefinition Height="4*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<lvc:CartesianChart Zoom="X" Pan="X" DisableAnimations="True" AnimationsSpeed="0:0:0.15" Series="{Binding SeriesCollection}" MouseMove="UIElement_OnMouseMove" LayoutUpdated="MainChart_LayoutUpdated" x:Name="MainChart" DataTooltip="{x:Null}">
<lvc:CartesianChart.AxisX>
<lvc:Axis Labels="{Binding Labels}" IsMerged="True">
<lvc:Axis.Sections>
<lvc:AxisSection Value="{Binding XPointer}"
SectionWidth="1"
SectionOffset="-0.5"
Fill="#59FF5722"
Stroke="#ff5722"
StrokeThickness=".5"
DataLabelForeground="White"
DataLabel="True"/>
</lvc:Axis.Sections>
</lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.AxisY>
<lvc:Axis LabelFormatter="{Binding Formatter}">
<lvc:Axis.Sections>
<lvc:AxisSection Value="{Binding YPointer}"
DataLabel="True"
StrokeThickness="1"
Stroke="#ff5722"
DisableAnimations="True"
DataLabelForeground="White"
Panel.ZIndex="1"/>
</lvc:Axis.Sections>
</lvc:Axis>
<lvc:Axis Position="RightTop" x:Name="VolumeAxis" LayoutUpdated="Axis_LayoutUpdated" Width="400">
</lvc:Axis>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
<lvc:CartesianChart Grid.Row="1" Zoom="X" Pan="X" DisableAnimations="True" AnimationsSpeed="0:0:0.15" Series="{Binding IndicatorSeriesCollection}" MouseMove="UIElement_OnMouseMove" x:Name="IndicatorChart" DataTooltip="{x:Null}">
<lvc:CartesianChart.AxisX>
<lvc:Axis Labels="{Binding Labels}" IsMerged="True">
<lvc:Axis.Sections>
<lvc:AxisSection Value="{Binding XPointer}"
SectionWidth="1"
SectionOffset="-0.5"
Fill="#59FF5722"
Stroke="#ff5722"
StrokeThickness=".5"
DataLabelForeground="White"
DataLabel="True"/>
</lvc:Axis.Sections>
</lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.AxisY>
<lvc:Axis LabelFormatter="{Binding Formatter}" MinValue="0" MaxValue="100">
<lvc:Axis.Sections>
<lvc:AxisSection Value="{Binding YPointer}"
DataLabel="True"
StrokeThickness="1"
Stroke="#ff5722"
DisableAnimations="True"
DataLabelForeground="White"
Panel.ZIndex="1"/>
</lvc:Axis.Sections>
</lvc:Axis>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
</Grid>
</UserControl>
SeriesCollection:
private void CreateCandleSeries(IReadOnlyList<Candle> candles)
{
var values = new List<OhlcPoint>();
foreach (var candle in candles)
{
values.Add(new OhlcPoint
{
Open = (double)candle.Open,
Close = (double)candle.Close,
High = (double)candle.High,
Low = (double)candle.Low
});
}
var gearValues = new GearedValues<OhlcPoint>();
gearValues.AddRange(values);
gearValues.WithQuality(Quality.Low);
var candleSeries = new GCandleSeries()
{
Values = gearValues,
ScalesYAt = 0,
};
var increaseBrush = candleSeries.IncreaseBrush;
var decreaseBrush = candleSeries.DecreaseBrush;
candleSeries.IncreaseBrush = decreaseBrush;
candleSeries.DecreaseBrush = increaseBrush;
SeriesCollection.Add(candleSeries);
}
IndicatorSeriesCollection:
private void CreateSingleLineOscilatorSeries(IReadOnlyList<Candle> candles, int period, Func<int, int?, int?, IReadOnlyList<AnalyzableTick<decimal?>>> indicator, SeriesCollection collectionToAddTo, int? startIndex = null, int? endIndex = null)
{
var indicatorCandleValues = indicator.Invoke(period, startIndex, endIndex);
var indicatorValues = new List<double>();
foreach (var value in indicatorCandleValues)
{
if (value.Tick.HasValue)
{
indicatorValues.Add((double)value.Tick.Value);
}
else
{
indicatorValues.Add(-1);
}
}
var indicatorMapper = new CartesianMapper<double>().X((value, index) => index).Y((value, index) => value);
var gearValues = new GearedValues<double>();
gearValues.AddRange(indicatorValues);
gearValues.WithQuality(Quality.High);
var smaSeries = new GLineSeries(indicatorMapper)
{
Fill = Brushes.Transparent,
Values = gearValues,
LineSmoothness = 0,
ScalesYAt = 0
};
collectionToAddTo.Add(smaSeries);
}
