Qt Qml 3 different graphs connected to a single y-axis

Question

I want to create 3 graphs one under the other. When I move the mouse on the screen, I want to see the x value in the 3 graphs corresponding to the y value at that point. The chart I want and the outputs of my own work are as in the images. Maybe I can achieve what I want by putting a rectangle on the charts I make. But is there a more useful way or example of this?

Another problem is if I am going to continue with my own method;

1. When I make 3 separate charts, only the lowest one has the y axis, so there are tick counts on it. It doesn't happen in the 1st and 2nd charts. This doesn't look good either. How can I make the tick counts in the 3rd chart invisible?

2. When I activate the plotArea command lines and make the graphics larger and closer to each other, as in the 3rd picture, the plot description is not fully readable and 2 of the 5 numbers on the x-axis become unreadable.

for example;

output of my own code

with plotAreas open

ColumnLayout{
        id: qmlWindow6GridLayout
        anchors.fill: parent

        ChartView {
            //title: "Spline1"
            id: chart1
            Layout.fillWidth:true
            Layout.fillHeight:true
            legend.visible: true
            backgroundColor: "black"
            antialiasing: true
            //plotArea: Qt.rect(35, 35, parent.width - 75, parent.height / 3 - 75)

            SplineSeries {
                //name: "Altimeter"
                name: "Chart 1"
                color: "red"
                axisX: ValuesAxis {
                    visible: false
                }

                axisY: ValuesAxis{
                    labelsColor: "white"
                }

                XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 15, 29, 00)); y: 50 }
                XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 15, 29, 20)); y: 100 }
                XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 29, 37)); y: 150 }
                XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 30, 20)); y: 200 }
                XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 45, 00)); y: 250 }
                XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 50, 00)); y: 300 }
            }
        }

        ChartView {
            //title: "Spline2"
            id: chart2
            Layout.fillWidth:true //yes, if wanted
            Layout.fillHeight:true //yes, if wanted
            legend.visible: true
            backgroundColor: "black"
            antialiasing: true
            //plotArea: Qt.rect(35, 35, parent.width - 75, parent.height / 3 - 75)

            SplineSeries {
                name: "Chart 2"
                color: "cyan"
                axisX: ValuesAxis {
                    visible: false
                }

                axisY: ValuesAxis{
                    labelsColor: "white"
                }

                XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 15, 29, 00)); y: 50 }
                XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 15, 29, 20)); y: 100 }
                XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 29, 37)); y: 150 }
                XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 30, 20)); y: 200 }
                XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 45, 00)); y: 250 }
                XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 50, 00)); y: 300 }
            }
        }

        ChartView {
            Layout.fillWidth: true
            Layout.fillHeight: true
            legend.visible: true
            backgroundColor: "black"
            antialiasing: true
            //plotArea: Qt.rect(75, 75, parent.width - 125, parent.height / 3 - 125)

            SplineSeries {
                name:  "Chart 3"
                color: "purple"
                axisX: DateTimeAxis {
                    format: "hh:mm:ss"
                    labelsColor: "white"
                }

                axisY: ValuesAxis{
                    labelsColor: "white"
                }

                XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 15, 29, 00)); y: 50 }
                XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 15, 29, 20)); y: 100 }
                XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 29, 37)); y: 150 }
                XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 30, 20)); y: 200 }
                XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 45, 00)); y: 250 }
                XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 50, 00)); y: 300 }
            }
        }
    }