CODEWITHSUNDEEP
qtqml
MReza Bagherzadeh
MReza Bagherzadeh

Reputation: 55

How to create a vertical line on the chart view to get the positions of the plots?

I put a chart view inside the qml. Now I want to draw a vertical line like the image image:
image, when the mouse enters the chart area and return the junction of the vertical line with all the plots drawn.

Upvotes: 2

Views: 1773

Answers (1)

oria66
oria66

Reputation: 123

These kinds of customizations are kind of tricky. There are other ways to achieve this, but I solve it using a Custom Component (the bar) on top of the ChartView in conjunction with a MouseArea (detection of the mouse position).

See the example:

    (...) 
    ChartView {
        id: mychart
        anchors.fill: parent
        antialiasing: true
    
     // Your chart particular customization code


        // This is your line marker
        Rectangle{
          id: linemarker                    
          y: parent.plotArea.y
          height: parent.plotArea.height
          width: 10
          radius: 5
          visible: false
          border.width: 1
          color: "red"
          anchors.top: parent.top
          anchors.topMargin: parent.height
          anchors.horizontalCenter: parent.horizontalCenter
        }

      // This is your mouse position detector
        MouseArea{
            anchors.fill: parent
            hoverEnabled: true
            acceptedButtons: Qt.AllButtons
            onMouseXChanged: {
                linemarker.visible = true

                var theValue = mychart.mapToValue(Qt.point(mouseX, mouseY), mychart.series(0))

                linemarker.x = mouseX - linemarker.width/2


                console.log(theValue)

            }
        }
    }

PS. It can be optimized more. It is a simple representation of the functionality.

Upvotes: 2

Related Questions