How to get the coordinates of a chart point in LiveCharts

Question

I add ObservablePoint to the CartesianChart chart. I need to get the x and y coordinates of this point in a window.

How can I do this by using code?

I tried to bring CartesianChart to the UIElement type to get the graphical elements inside it, but I failed.

Here is the code that I use:

Class

using System.Windows;
using LiveCharts;
using LiveCharts.Wpf;
using LiveCharts.Defaults;
using System.Windows.Media;
using System.Threading.Tasks;
using System;
using System.Threading;

namespace TestChartApp
{
    public partial class MainWindow : Window
    {
        SeriesCollection series = new SeriesCollection();

        ChartValues<ObservableValue> observableValues = new ChartValues<ObservableValue>();

        LineSeries lineSeries = new LineSeries
        {
            Stroke = Brushes.Blue,
            Fill = Brushes.Transparent,
        };

        public MainWindow()
        {
            InitializeComponent();

            observableValues.Add(new ObservableValue(0));

            lineSeries.Values = observableValues;

            series.Add(lineSeries);

            myChart.Series = series;
            myChart.DataTooltip = null;
            myChart.Hoverable = false;
        }
    }
}

XAML

<Window x:Class="TestChartApp.MainWindow"
        ...
        Title="MainWindow" Height="600" Width="1200" WindowStartupLocation="CenterScreen">
    <Grid>
        <lvc:CartesianChart x:Name="myChart" DisableAnimations="True" Width="800" HorizontalAlignment="Left">
            <lvc:CartesianChart.AxisX>
                <lvc:Axis MaxValue="100" MinValue="0" Labels="" Unit="1">
                    <lvc:Axis.Separator>
                        <lvc:Separator Step="20">
                            <lvc:Separator.Stroke>
                                <SolidColorBrush Color="Gray" />
                            </lvc:Separator.Stroke>
                        </lvc:Separator>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY>
                <lvc:Axis MaxValue="100" MinValue="-100" Labels="">
                    <lvc:Axis.Separator>
                        <lvc:Separator>
                            <lvc:Separator.Stroke>
                                <SolidColorBrush Color="Gray" />
                            </lvc:Separator.Stroke>
                        </lvc:Separator>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisY>
        </lvc:CartesianChart>
    </Grid>
</Window>

Answer 1

When you have access to the chart, then find the chart point of interest from the SeriesCollection.Values that maps to the SeriesColection.ChartPoints (e.g., map by index):

MainWindow.xaml

<Window>  
  <CartesianChart x:Name="MyChart" />
</Window>

MainWindow.xaml.cs

// Get the target series
var firstLineSeries = this.MyChart.Series[0] as LineSeries;

// Get a point from this series (in this case the first)
ChartPoint firstPointInLineSeries = firstLineSeries.ChartPointsElementAt(0);

// Convert the CahrtPoint to common WPF Point
Point convertedChartPoint = firstPointInLineSeries.AsPoint();

// Get the position of this point relative to the chart
Point chartPointPositionInChart = this.MyChart.ConvertToPixels(convertedChartPoint);

// Convert the chart point pixel coordinates 
// to the parent Window coordinates
Point chartPointPositionInWindow = this.MyChart.TransformToVisual(this).Transform(chartPointPositionInChart);