qtqmlqtquick2qchartview

How to add text in plotting area of chartview in qml


How do I place text at specific (x,y) locations within the plotting area of a QML ChartView type?

For example, I would like to place text at the location XYPoint{x: -3; Y: 20} I don't want to place at window's(x,y), i want to put at plotting area's (x,y)

I read documentation,but i don't find any property !!!!!!

//ChartView for plotting points

ChartView{
    id:chrt
    anchors.fill: parent
    height: parent.height
    width: parent.width
    legend.visible: false
    backgroundColor: "black"


    //X- axis
    ValueAxis{
        id: x_axis
        min: -5
        max: 0
        tickCount: 6
    }

    //Right Y axis
    ValueAxis{
        id:right_y_axis
        min:0
        max:40
        tickCount: 5
    }

    //Left Y axis
    ValueAxis{
        id:left_y_axis
        min:0
        max:40
        tickCount: 5
    }

    //Line series for wave 1
    LineSeries{
        id:l1
        axisY: left_y_axis
        axisX:x_axis
        color: "yellow"
        width: 1
    }

    //Line series for wave 2
    LineSeries{
        id:l2
        axisYRight: right_y_axis
        style: Qt.DashLine
        color: "yellow"
        width: 0.6
    }
}

Solution

  • Ok, you can use ChartView.mapToPosition to calculate the global position of the specified point from a series (or some another point inside the series), for example:

    ChartView{
        id:chart
        anchors.fill: parent
        backgroundColor: "black"
    
        LineSeries{
            id: series
            XYPoint { x: 10; y: 5  }
            XYPoint { x: 10; y: 1 }
            XYPoint { x: 15; y: 5 }
            XYPoint { x: 20; y: 10 }
            XYPoint { x: 25; y: 5 }
            XYPoint { x: 30; y: 20 }
            XYPoint { x: 40; y: 10 }
        }
    
        Text {
            id: txt
            text: "Hello"
            color: "white"
        }
    
        onWidthChanged: updatePointPosition();
        onHeightChanged: updatePointPosition();
    
        function updatePointPosition()
        {
            var p = chart.mapToPosition(series.at(3), series);
            txt.x = p.x;
            txt.y = p.y;
        }
    }