How to use ScrolLeft and ScrollRight Methods of QML Charts

pra7

I need to scroll a QT Graph using a scrollbar and for that, i have created my own custom scrollbar using Rectangle and MouseArea which can be dragged.

When i tried to scroll a Chart using ScrollRight and ScrollLeft Methods i am not able to link/bind the ScrollBar X with the ChartView content X.Following is the code :

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtCharts 2.0

Window {
    id: window
    width: 640
    height: 480
    visible: true

    ChartView {
        id: chartview
        width: parent.width
        height: 300

        LineSeries {
            name: "LineSeries"
            axisX: ValueAxis {
                min: 0
                max: 100
                tickCount: 12
                labelFormat: "%.0f"
            }

            axisY: ValueAxis {
                min: 0
                max: 70
                tickCount: 5
                labelFormat: "%.0f"
            }
            XYPoint { x: 0; y: 0.0 }
            XYPoint { x: 1.1; y: 3.2 }
            XYPoint { x: 1.9; y: 2.4 }
            XYPoint { x: 2.1; y: 2.1 }
            XYPoint { x: 2.9; y: 2.6 }
            XYPoint { x: 3.4; y: 2.3 }
            XYPoint { x: 200.1; y: 3.1 }
        }
    }

    /* Rectangle base for horizontal scroll bar */
    Rectangle{
        id:rectHorScrollBase
        width:parent.width
        height:parent.height * 0.10
        anchors.top:chartview.bottom
        anchors.topMargin: (parent.height * 0.01)
        color:"transparent"
        visible: true

        /* Rectangle indicating scroll path*/
        Rectangle {
            id:rectHorScrollPath
            width: parent.width
            height: parent.height
            anchors.left:parent.left

            radius: 2
            color: "lightblue"
        }

        /* Actual scroll rectaangle which will be dragged */
        Rectangle {
            id: rectHorScroll
            property var prevX : 0

            anchors.top : parent.top
            width: 50
            height: parent.height
            color: "green"

            /* Mouser area to drag the rectangle and to move Chart */
            MouseArea {
                id:mouseAreaHorScroll

                anchors.fill: parent
                drag.target: parent
                drag.minimumX: 0
                drag.maximumX: chartview.width - width
                drag.axis: Drag.XAxis

                onReleased: {
                    console.log("x in Released ===",rectHorScroll.x)
                    rectHorScroll.prevX = rectHorScroll.x
                }
            }

            onXChanged: {

                // HOW TO HANDLE THE SCROLL BASED ON x ? 
                if(mouseAreaHorScroll.drag.active)
                {
                    if(x > prevX)
                    {
                        chartview.scrollRight(x) // NOT WORKING
                    }
                    else
                    {
                        chartview.scrollLeft(x) //NOT WORKING
                    }
                }
            }
        }
    }
}

How to map scrollBar X with ChartView Content X ?
The scrollbar should not go beyond maximum and minimum Value of X Axis. How to do that?
There should be a sync between ScrollBar and ChartView.