Multi color plot in line series in QML

Question

I plotted a list into a line series graph. The length of the list may around 4000

1. I want to color the values of Y axis in range above 1000 as RED and below as GREEN. Is that possible?
2. In order to improve the performance, can i use any alternate instead using FOR loop. since the length is 4000, it is taking more time to plot. Kindly suggest some other instead of FOR loop

import QtQuick 2.9
import QtQuick.Window 2.2
import QtCharts 2.0
import QtQuick.Controls 2.15

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("ADC Chart")

    ChartView {
        id: chart
        anchors.fill: parent
        theme: ChartView.ChartThemeBrownSand
        antialiasing: true


        Component.onCompleted: {
            line.clear();
            for (let i = 0; i < r_manager.ADC1y.length; ++i) {          
                line.append(i, r_manager.ADC1y[i]);
            }
        }

        LineSeries {
            id: line
            name: "ADC1"
            axisX: ValueAxis {
                titleText: "Sample"
                min: 0
                max: r_manager.ADC1y.length
            }

            axisY: ValueAxis {
                titleText: "ADC"
                min: -400
                max: 400
            }
        }
    
    }

}

1. Line series multicolor. Is that possible?
2. To improve performance.Kindly suggest some other instead of FOR loop

Answer 1

Draw both a green version and a red version of your chart. Put the red version inside an item and clip it to reveal some of it so that you see a mashup between your green and red chart.

As chart placeholders, I use SVG images, but, feel free to swap it with the actual chart:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
Page {
    title: "Colorize Demo"
    RowLayout {   
        anchors.centerIn: parent
        Slider {
            id: slider
            from: 0
            to: chart.height
            orientation: Qt.Vertical
            rotation: 180
            Component.onCompleted: value = 155
        }
        Image {
            id: chart
            source: "green-chart.svg"
            cache: false
            Item {
                width: chart.width
                height: slider.value
                clip: true
                Image {
                    source: "red-chart.svg"
                    cache: false
                }
            }
        }
    }
}

// green-chart.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 400">
<path stroke="grey" stroke-width="1" d="
M 100 300 L 500 300
M 100 240 L 500 240
M 100 180 L 500 180
M 100 120 L 500 120
M 100  60 L 500  60
M 100 300 L 100  60
M 200 300 L 200  60
M 300 300 L 300  60
M 400 300 L 400  60
M 500 300 L 500  60"/>
<path stroke="green" stroke-width="5" fill="none" d="
M 100 300
L 200 200
L 280 150
L 320 220
L 380  60
L 420 150
L 500 130
"/>
</svg>

// red-chart.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 400">
<path stroke="grey" stroke-width="1" d="
M 100 300 L 500 300
M 100 240 L 500 240
M 100 180 L 500 180
M 100 120 L 500 120
M 100  60 L 500  60
M 100 300 L 100  60
M 200 300 L 200  60
M 300 300 L 300  60
M 400 300 L 400  60
M 500 300 L 500  60"/>
<path stroke="red" stroke-width="5" fill="none" d="
M 100 300
L 200 200
L 280 150
L 320 220
L 380  60
L 420 150
L 500 130
"/>
</svg>

You can Try it Online!