Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Scroll inside ChartView QML



  • Hi EveryOne, so in my project I'm trying to create Chartview dynamically using repeater so I want to use a ScrollView for that how to do it?, also inside this ChartView in the axis X I want have an horizontal Scoll so that I can scroll the axis X is there any solution for that please?



  • any solution pleaaaaaaaaase



  • From what I understand from your question is that you want to add the horizontal scroll to your chart.
    From my point of view "ScrollView" can be of less value if you want to scroll inside the chart.
    ScrollView can be usefull when you want to scroll across multiple charts in this scenario.

    Here is a sample code that shows how to implement horizontal scroll for one chart. Hope you can implement for multiple charts.

    When you press the left mouse button and move the mouse the scroll function is implemented (you change this logic to any other function)

    Item {
        id: root
        anchors.fill: parent
    
        ChartView {
            id: chartViewItem
            antialiasing: true
            anchors.fill: parent
    
            LineSeries {
                id: lineSeriesChart
                name: "Random Data"
                XYPoint { x: 0; y: 0 }
                XYPoint { x: 10; y: 12 }
                XYPoint { x: 20; y: 32 }
                XYPoint { x: 30; y: 25 }
                XYPoint { x: 40; y: 14 }
                XYPoint { x: 50; y: 39 }
                XYPoint { x: 60; y: 53 }
                XYPoint { x: 70; y: 0 }
                XYPoint { x: 80; y: 12 }
                XYPoint { x: 90; y: 32 }
                XYPoint { x: 100; y: 25 }
                XYPoint { x: 110; y: 14 }
                XYPoint { x: 120; y: 39 }
                XYPoint { x: 130; y: 53 }
             }
    
            Rectangle {
                id: horizontalScrollMask
                visible: false
            }
    
            MouseArea {
                id: chartMouseAreaA
                anchors.fill: parent
                acceptedButtons: Qt.LeftButton
    
                onMouseXChanged: {
                    if ((mouse.buttons & Qt.LeftButton) == Qt.LeftButton) {
                        chartViewItem.scrollLeft(mouseX - horizontalScrollMask.x);
                        horizontalScrollMask.x = mouseX;
                    }
                }
                onPressed: {
                    if (mouse.button == Qt.LeftButton) {
                        horizontalScrollMask.x = mouseX;
                    }
                }
            }
        }
    }
    

    saa3.png


Log in to reply