How to Scroll inside ChartView using mousearea in QML

Question

I wrote this code and I am expecting the ChartView to scroll right or left when mouse wheel is turning in one way or the other.

ChartView {
    id: chartView
    animationOptions: ChartView.NoAnimation
    theme: ChartView.ChartThemeDark 
    ValueAxis {
        ...
    }
    ValueAxis {
        ...
    }
    LineSeries {
        ...
    }
    MouseArea {
        anchors.fill: parent

        onWheel: {
            if (wheel.modifiers & Qt.ControlModifier){
                if (wheel.angleDelta.y > 0)
                {
                    chartView.scrollRight(5)
                }
                else
                {
                    chartView.scrollLeft(5)
                }
                wheel.accepted=true
            }
            else{
                wheel.accepted=false
            }
        }
    }
}

Not working though. What am I missing?

Answer 1

I would use the ScrollView:

Rectangle {
    width: 200 //size of the viewed part
    height: 200 //size of the viewed part
    color: "transparent"
    clip: true
    ScrollView {
        anchors.fill: parent
        contentWidth: chartRec.width
        contentHeight: chartRec.height
        Rectangle {
            id: chartRec
            height: 400 //size of the chart
            width: 400 //size of the chart 
            color: "transparent"
            ChartView {
                id: chartView
                anchors.fill: parent
                animationOptions: ChartView.NoAnimation
                theme: ChartView.ChartThemeDark 
                ValueAxis {
                    ...
                }
                ValueAxis {
                    ...
                }
                LineSeries {
                    ...
                }
            }
        }
    }
}

The size of the second Rectangle should be greater than the size of the first Rectangle. If not, the ScrollView will not be shown.