'How can I display X and Y coordinates of multiple lineseries on hovering in qml chartview

I want to display X and Y coordinates of a multiple lineseries on hovering any lineseries in qml chartview. The X and Y coordinates displaying should be the plotted values only. Please go through the attachment.Displaying Values on Hover

I came across mapToValue() function of ChartView. But, I did not get how to use it. Could some one please help me on this.

I have implemented a sample code below, but could not able to print the x and y coordinates of each lineseries.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtCharts 2.3

Window {
id: window
visible: true
width: 640
height: 480
title: qsTr("Hello World")

property var x1Val : [0,1,2,3,4,5,6,7,8,9]
property var y1Val : [0,1,2,3,4,5,6,7,8,9]

property var x2Val : [0,1,2,3,4,5,6,7,8,9]
property var y2Val : [1,2,3,4,5,6,7,8,9,10]

property var lineSeries: 0

Component.onCompleted: {
    var xVal, yVal
    
    for(let i = 0; i < 2; i++) {
        lineSeries = chartView.createSeries(ChartView.SeriesTypeLine, "strend" + i)
        
        lineSeries.hovered.connect(
                    function(point, state) {
                        if (state) {
                            for(let i = 0; i < 2; i++) {
                                console.log("Name = ", chartView.series(i).name)
                                //console.log("x = ", point.x + ", y = ", point.y)
                                //console.log("x = ", chartView.series(i).at(i).x + ", y = ", chartView.series(i).at(i).y)
                                // How to get x and Y coordinates for each lineseries here ??
                            }
                        }
                    })
        
        lineSeries.axisX.min = 0
        lineSeries.axisX.max = 10
        lineSeries.axisY.min = 0
        lineSeries.axisY.max = 10
        lineSeries.pointsVisible = true;
        
        if(i === 0) {
            xVal = x1Val
            yVal = y1Val
        }
        else {
            xVal = x2Val
            yVal = y2Val
        }
        
        for(var iLoop = 0; iLoop < x1Val.length; iLoop++) {
            lineSeries.append(xVal[iLoop], yVal[iLoop])
        }
    }
}

ChartView {
    id: chartView
    anchors.fill: parent
    antialiasing: true
    legend.visible: true
}

}



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source