Event for clicking a point in diagram

[Gossenruda]

Hi,

Is there any way to select a point in LiveCharts2? I can see that there is an event for 'PointHovered' but not clicked. Is there any way to solve this in another way (or a workaround)?

[Alex8695]

I too have been struggling with this.

In the previous version there were events Chart.DataClick & Chart.DataHover.

Would be nice to see this feature return.

[Alex8695]

Here is my workaround, a little drawn out, but hope it helps :-)

UserControl (XAML):

Added a MouseDown eventhandler to my CartesianChart

<lvc:CartesianChart 
                        Series="{Binding Series}" 
                        XAxes="{Binding XAxis}"
                        ZoomMode ="Both"
                        MouseDown="CartesianChart_MouseDown" />

View Model Class (C#):

Code is pretty broken up and can be condensed, but should be helpful to see what's going on.

• Get the tool tip
• Get the point associated with the tool tip
• From the point, you can get any values assigned to the ColumnSeries

private void CartesianChart_MouseDown(object sender, MouseButtonEventArgs e)
		{
			CartesianChart _chart;
			DefaultTooltip _toolTip;
			TooltipPoint _point;
			string _y_value = null;
			string _seriesName = null;
			double _x_value = 0;

			SelectedItems.Clear(); //ObservableCollection of selected items in the ViewModel

			_chart
				= (CartesianChart)sender;

			_toolTip =
				(DefaultTooltip)((CartesianChart)e.Source)
				.PointStates
				.Chart
				.Tooltip;

			_point =
				_toolTip
				.Points
				.ToArray()[0];

			_y_value = 
				(_chart.XAxes.ToArray())[0].Labels[(int)_point.Point.SecondaryValue];

			_x_value =
				_point.Point.PrimaryValue;

			_seriesName =
				_point.Series.Name;

			Debug.WriteLine($"{_seriesName} : {_x_value} - {_y_value}");

			SelectedItems.Add(_y_value);

		}

Given a Class Object:

class SomeClass{
    public string MyNameObj{get;set;}="";
    public int Count01{get;set;}=0;
    public int Count02{get;set;} = 0;
    public long TimeStamp{get;set;}=DateTime.MinValue.Ticks;
}

ColumnSeries created:

For me, all the data comes into a collection called chartData.

• Create Count01 groups via GroupBy
• Create a ColumnSeries for each of the groups
• Add ColumnsSeries to the ISeries collection binded to the chart

private ObservableCollection<ISeries> series = new ObservableCollection<ISeries>();

foreach (var item in chartData.GroupBy(g => g.Count01))
{
    ColumnSeries<SomeClass> _serries =
        new ColumnSeries<SomeClass>()
        {
            Name = item.First().MyNameObj
            , Values = new ObservableCollection<CpidMor>() //suppose you could fill the Values from the group item
          
            , Mapping = (sc, point) => {
                point.SecondaryValue = sc.Count01;
                point.PrimaryValue = sc.Count02;
            }
            , TooltipLabelFormatter = (point) => $"{point.Model.MyNameObj}\nx{point.Model.Count01}\n{point.Model.DateTicks.ToString("MM/yyyy")}"

        };
///Run Code Here To Fill The Values Of The Series, If Not Already Set

        series.Add(_serries);
}
``

[ghost]

But I would also prefer an event handler.

As a workaround I am using the MouseDoubleClick event handler:
XAML:

<liveChartsWpf:CartesianChart ... MouseDoubleClick="OnMouseDoubleClick">

XAML code behind:

private void OnMouseDoubleClick(object sender, MouseButtonEventArgs eventArgs)
{
    if (sender is not CartesianChart liveChart)
    {
        return;
    }
    var point = eventArgs.GetPosition(this);
    var chartPosTimeline = liveChart.ScaleUIPoint(new LvcPoint((float)point.X, (float)point.Y))[0]; // double[0] = value of y axis
    eventArgs.Handled = true;
}

[preintel]

I am working on Winforms, if I use the mouseclick event handler for the cartesianchart is it possible to use this to get the X-value as a Datetime value (since my x-axis is datetime) or is there a conversion?

[ghost]

Sorry my fault, the comment is wrong: it is the value of x axis!
var chartPosTimeline = liveChart.ScaleUIPoint(new LvcPoint((float)point.X, (float)point.Y))[0]; // double[0] = value of x axis
the result is DateTime.Ticks, new DateTime(long ticks) converts it to a DateTime object:
var timestamp = new DateTime((long)chartPosTimeline);

[preintel]

Is there an easy way to use this information on Winforms to show a "cross hair" (x-line transecting y-line) at the current mouse location that moves when user moves mouse inside the chart control? Maybe via mouse move event handler draw the lines programmatically or if better way to do it let me know =) Thanks

[preintel]

Any luck with the code for making a cross hair at the mouse location? I would like to implement it on multiple charts without having to code a mouse event for each chart, maybe a method they can share but not sure how to display the cross hair on the chart without drawing segment lines manually. Would be nice if the next update included this as an option/feature of the charting object itself.

[GF-Huang]

If you're using WPF, you can consider behavior. I'm not sure other xaml-like technology (UWP etc...) supports behavior.

[JPhilC]

After digging through the sources I realised that there is DataPointerDown event on the Series classes. The core of the code I now have working is shown in the snippets below.

In your viewmodel define your series

        private ScatterSeries<AlignmentPoint, SquareGeometry> _syncedScatterSeries =
            new ScatterSeries<AlignmentPoint, SquareGeometry>
            {
                Stroke = new SolidColorPaint(SKColors.LightGreen) { StrokeThickness = 1 },
                Fill = null,
                Values = SkyServer.AlignmentModel.AlignmentPoints,
                Mapping = (alignmentPoint, point) =>
                {
                    point.PrimaryValue = alignmentPoint.SyncedCartesian.x;
                    point.SecondaryValue = -alignmentPoint.SyncedCartesian.y;
                },
                GeometrySize = 10
            };

In your VM's constructor hook up the event handler and add the series into your ObservableCollectio

            _syncedScatterSeries.DataPointerDown += ScatterSeries_DataPointerDown;
            ChartData.Add(_syncedScatterSeries);

The event handler looks like this.

        private void ScatterSeries_DataPointerDown(LiveChartsCore.Kernel.Sketches.IChartView chart, IEnumerable<LiveChartsCore.Kernel.ChartPoint<AlignmentPoint, SquareGeometry, LabelGeometry>> points)
        {
            if (points != null)
            {
                SelectedAlignmentPoint = points.FirstOrDefault()?.Model;
            }
        }

In my case I use this approach to keep the selected row in a DataGrid in sync with the selected data point on the chart.