ChartView with Vertical Cross Line indicating series value at the intersect

Question

I am trying to implement a QML ChartView with Vertical Intersect Cross Line which will indicate the line value at the intersect as user moves the vertical line on X Axis. Vertical line is movable and user can move it on X Axis min to max. Is there a way to read the value at vertical line and LineSeries intersect?

Line something similar to below image:

But I have no idea how this can be done with QML ChartView.
Do I need to overlay a 1 pixel rect on top of the chart and somehow get the value at the X, Y location for the series?

Sometime I had the similar problem. I've solved that by adding additional series (probably BarSeries) with the same x axis as the line series and custom y axis, where 1 is the max value. In this case you can add to this series several values where it's needed, taking your image as example - { March, 1}. The bar width and color can be adjusted as needed. Also an label could be added too. — folibis, Jun 09 '20 at 09:52
@folibis: Thanks for reply I need the vertical line user movable, user can drag the line on the X Axis and as he drags the line I will update one text with intersection values with LineSeries. Is there a way I can get the value at X, Y location in from LineSeries. Something similar to https://stackoverflow.com/questions/48789849/draging-a-point-on-qtcharts-in-qml — User7723337, Jun 09 '20 at 10:14
As you see from the answer from the link there is no way to get the mouse location in some native way. But you can use the workaround from the link and so update the red line according to that. — folibis, Jun 09 '20 at 10:43
As per the answer we can get the X, Y value based on the mouse click event from the series, but I have a vertical line which user can drag using the knob on the X Axis so I don't have the mouse click event in the chart. Where this line intersect with the lines I want to get the X, Y value at that intersection. Is this possible in QML ChartView — User7723337, Jun 09 '20 at 11:09
i have the same problem . also i need 2 lines . like ("+") plus sign to show mouse position . — Nemo, Jan 29 '21 at 04:26

score 0 · Answer 1 · edited Jun 19 '23 at 15:05

You can do something like this:

Rectangle{
    id: slider_pointer
    height: rec_chart_view.height-50*ProjConfig.sf //500
    width: 2
    color: 'grey'
    anchors.bottom: slider.top
    anchors.horizontalCenter:rec_plt_slider.horizontalCenter
    
    onXChanged: {
        let x_res =x+(plotArea.x)
        sliderposition = Qt.point(x_res, 0)
        let series_component = chart_view.series(0)
        let slider_position_data = chart_view.mapToValue(sliderposition, series_component)
    }
}

The variable slider_position_data will return the value at sliderposition.

ChartView with Vertical Cross Line indicating series value at the intersect

1 Answers1