Custom tooltip Tooltip in QML chartview

Question

I have set a custom tooltip using the code

ChartView {
    id: chart
    anchors.fill: parent
    antialiasing: true
    ValueAxis {
        id: axisY
        tickCount: 3
    }
    DateTimeAxis{
           id: xTime
           gridVisible: false
       }
    ToolTip {
        id: id_toolTip
        contentItem: Text{
            color: "#21be2b"
        }
        background: Rectangle {
                border.color: "#21be2b"
            }

    }
    SplineSeries{
        id: chartseries
        pointsVisible: true
        pointLabelsVisible: false
        useOpenGL: true
        axisX: xTime
        axisY: axisY
        onClicked: {
            id_toolTip.show("dd")
         }
    }

}

It gives an error when I click on the graph ..

TypeError: Property 'show' of object QQuickToolTip(0x37275d0) is not a function" 

But below mentioned code will work.

  chart.ToolTip.show("dd")

But I need custom tooltip

Answer 1

You can use the other properties as I show below:

ChartView {
    id: chart
    anchors.fill: parent
    antialiasing: true
    ValueAxis {
        id: axisY
        tickCount: 3
        max: 4
        min: 0
    }
    DateTimeAxis{
        id: xTime
        gridVisible: false
    }

    ToolTip {
        id: id_tooltip
        contentItem: Text{
            color: "#21be2b"
            text: id_tooltip.text
        }
        background: Rectangle {
            border.color: "#21be2b"
        }
    }

    SplineSeries{
        id: chartseries
        XYPoint { x: new Date('December 17, 1995 03:24:00').getTime() ; y: 0.0 }
        XYPoint { x: new Date('December 18, 1995 04:25:00').getTime() ; y: 3.2 }
        XYPoint { x: new Date('December 19, 1995 05:26:00').getTime() ; y: 2.4 }
        XYPoint { x: new Date('December 20, 1995 06:27:00').getTime() ; y: 2.1 }
        XYPoint { x: new Date('December 21, 1995 07:24:00').getTime() ; y: 0.0 }
        XYPoint { x: new Date('December 22, 1995 08:25:00').getTime() ; y: 3.2 }
        XYPoint { x: new Date('December 23, 1995 09:26:00').getTime() ; y: 2.4 }
        XYPoint { x: new Date('December 24, 1995 10:27:00').getTime() ; y: 2.1 }

        pointsVisible: true
        pointLabelsVisible: false
        useOpenGL: true
        axisX: xTime
        axisY: axisY
        onClicked: {
            var p = chart.mapToPosition(point)
            var text = qsTr("x: %1, y: %2").arg(new Date(point.x).toLocaleDateString(Qt.locale("en_US"))).arg(point.y)
            id_tooltip.x = p.x
            id_tooltip.y = p.y - id_tooltip.height
            id_tooltip.text = text
            //id_tooltip.timeout = 1000
            id_tooltip.visible = true
        }
    }
}