Slow response in Area Series chart - QML

Ratheesh T

Hi Technical Team,

I am trying to implement the below features in qml:
1. Draw 'area chart' graph using dynamic values which are getting updated from timer loop using 'Area Series ChartView'.
2. Area chart is scrolling left once 250 points are reached in xAxis.
3. Reverse axis is used : " reverse: Qt.RightToLeft "
4. The real values are also updated in Text item (id: nameLiveId).

The area chart graph values and Text item's values are getting updated inside the timer loop at the same time with enabling of scrolling of graph.
Below is the code snippet
nameLiveId.text=yAxisValue
lineSeries.append(xAxisValue, yAxisValue);
if(xAxisValue>=250)chart.scrollLeft(1)

The issue is described below
* area chart graph shown value and Text item's values are not same (Attached the output screenshot images also to understand the issue )
Included the full source code also for reference

import QtQuick
import QtQuick.Window 2.2
import QtQuick.Controls 2.5
import QtCharts 2.3

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Charts")
    id: windowGraphId
    property real pixelMoveValue: 1
    property var lineSeries
    property var areaSeries
    property int xAxisValue:0
    property int yAxisValue:0
    property bool bIncrement: true
    ChartView {
        id: chart
        legend.visible: false
        anchors.fill: parent
        backgroundColor: "black"
        backgroundRoundness:10
        plotAreaColor:"transparent"
        dropShadowEnabled:true
        title: "<b>Dynamic Values</b>"
        titleColor: "yellow"
        opacity: 0.7
        ValueAxis{
            id: xAxis
            min:1
            max:250
            tickCount: 5
            labelFormat: "%.0f"
            reverse: Qt.RightToLeft
            labelsColor:"orange"
            gridVisible: false
        }

        ValueAxis{
            id: yAxis
            min:1
            max:250
            labelFormat: "%.0f"
            tickCount: 5
            labelsColor:"red"
            gridVisible: false
        }
        Rectangle{
            id: liveId
            height: 30
            width: 40
            color: "transparent"
            visible: true
            anchors.top: parent.top
            anchors.left: parent.left
            Text {
                id: nameLiveId
                anchors.right:liveId.right
                anchors.bottom:liveId.bottom
                text: " "
                font.bold: true
                font.pixelSize: 14
                color:"yellow"
            }
        }
        Component.onCompleted: {
            areaSeries = chart.createSeries(ChartView.SeriesTypeArea, "", xAxis, yAxis)
            lineSeries = chart.createSeries(ChartView.SeriesTypeLine, "", xAxis, yAxis)
            lineSeries.color = "yellow"
            areaSeries.color = "lime"
            areaSeries.upperSeries = lineSeries
        }

                Timer {
                    id: refreshTimer
                    interval: 30
                    running: true
                    repeat: true

                    onTriggered:
                    {
                        xAxisValue=xAxisValue+1;
                        if (bIncrement)
                        {
                            yAxisValue++;
                            if(yAxisValue == 250)
                                bIncrement = false;
                        }
                        else
                        {
                            yAxisValue--;
                            if(yAxisValue == 0)
                                bIncrement = true;
                        }
                        nameLiveId.text=yAxisValue
                        lineSeries.append(xAxisValue, yAxisValue);
                        if(xAxisValue>=250)chart.scrollLeft(1)
                    }
                }
    }
}

Could you please help to solve this issue?