Gradient color and glow on chart

[neda]

Hi guys,
I wanna to have gradient color and glow on chart.
Like this picture:

I use this code but it does not work.

Glow {
        anchors.fill: chartView
        radius: 18
        samples: 37
        color: "#15bdff"
        source: chartView
    }
    ChartView {
        id: chartView
        //  visible: false
        //  title: "Test"
        anchors.fill: parent
        // antialiasing: true
        backgroundColor: "transparent"
        legend.visible: false
        //theme: ChartView.ChartThemeBrownSand
        animationOptions: ChartView.AllAnimations

        // dropShadowEnabled: true

        ValueAxis {
            id: valueAxis
            min: 2000
            max: 2011
            // tickCount: 12
            //labelFormat: "%.0f"
        }

        AreaSeries {
            name: "Test"
            axisX: valueAxis
            //color:"transparent"
            //ColorAnimation on color { to: "yellow"; duration: 1000 }
            //color: "green"
            //borderColor: "white"
            //borderWidth: 4
            //brushFilename: "qrc:/backgroundChart.jpg"

            upperSeries: LineSeries {
                id:linechart
                capStyle: Qt.RoundCap

                LinearGradient {
                    anchors.fill: parent
                    start: Qt.point(0, 0)
                    end: Qt.point(0, 300)
                    gradient: Gradient {
                        GradientStop { position: 0.0; color: "white" }
                        GradientStop { position: 1.0; color: "black" }
                    }
                }

                XYPoint { x: 2000; y: 1 }
                XYPoint { x: 2001; y: 1 }
                XYPoint { x: 2002; y: 1 }
                XYPoint { x: 2003; y: 1 }
                XYPoint { x: 2004; y: 1 }
                XYPoint { x: 2005; y: 0 }
                XYPoint { x: 2006; y: 1 }
                XYPoint { x: 2007; y: 1 }
                XYPoint { x: 2008; y: 4 }
                XYPoint { x: 2009; y: 3 }
                XYPoint { x: 2010; y: 2 }
                XYPoint { x: 2011; y: 1 }
            }
        }
    }

Please guide me.
thanks

[Diracsbracket]

@neda
As a rough approximation, the following is my idiotic approach to your problem:

The code is below. Unfortunately, the overlaid grid does not exactly match the glowing plots, because in order to achieve the effect, the grid lines and axes (and labels) must be made invisible (lest they would be shown glowing as well). This will make the effective plot area larger for these...

For what it is worth:

    LinearGradient {
        anchors.fill: parent
        start: Qt.point(0, 0)
        end: Qt.point(0, 300)
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 8.0; color: "black" }
            GradientStop { position: 1.0; color: "grey" }
        }
    }

    ChartView {
        id: chartView
        anchors.fill: parent
        backgroundColor: "transparent"
        legend.visible: false

        Component.onCompleted: {
            axisX(lineSeries).visible = false
            axisY(lineSeries).visible = false
        }

        ValueAxis {
            id: valueAxisX
            min: 0
            max: 50
            color: "transparent"
            labelsFont:Qt.font({pointSize: 12})
        }

        ValueAxis {
            id: valueAxisY
            min: 10
            max: 200
            color: "transparent"
        }

        SplineSeries {
            id: lineSeries
            name: "LineSeries"
            color: "blue"
            width: 8
            XYPoint { x: 0; y: 0 }
            XYPoint { x: 1.1; y: 2.1 }
            XYPoint { x: 1.9; y: 3.3 }
            XYPoint { x: 2.1; y: 2.1 }
            XYPoint { x: 2.9; y: 4.9 }
            XYPoint { x: 3.4; y: 3.0 }
            XYPoint { x: 4.1; y: 3.3 }
        }
    }

    Glow {
        id: glow1
        anchors.fill: chartView
        radius: 20
        samples: 20
        spread: 0.35
        color: "blue"
        visible: true
        source: chartView
    }

      ChartView {
        id: chartView2
        anchors.fill: parent
        backgroundColor: "transparent"
        legend.visible: false

        Component.onCompleted: {
            axisX(lineSeries2).visible = false
            axisY(lineSeries2).visible = false
        }

        ValueAxis {
            id: valueAxisX2
            min: 0
            max: 50
            color: "transparent"
        }

        ValueAxis {
            id: valueAxisY2
            min: 10
            max: 200
            color: "transparent"
        }

        SplineSeries {

            id: lineSeries2
            name: "LineSeries"
            color: "red"
            width: 8
            XYPoint { x: 0; y: 0 }
            XYPoint { x: 1.1; y: 3.1 }
            XYPoint { x: 1.9; y: 2.3 }
            XYPoint { x: 2.1; y: 1.1 }
            XYPoint { x: 2.9; y: 3.9 }
            XYPoint { x: 3.4; y: 3.0 }
            XYPoint { x: 4.1; y: 2.3 }
        }
    }

    Glow {
        id: glow2
        anchors.fill: chartView2
        radius: 20
        samples: 20
        spread: 0.35
        color: "red"
        visible: true
        source: chartView2
    }

    ChartView {
        anchors.fill: parent

        id: chartView3
        backgroundColor: "transparent"
        legend.visible: false

        Component.onCompleted: {
            axisX(lineSeries3).gridVisible = false
            axisY(lineSeries3).gridVisible = false
        }

        ValueAxis {
            id: valueAxisX3
            min: 0
            max: 50
            color: "transparent"
        }

        ValueAxis {
            id: valueAxisY3
            min: 10
            max: 200
            color: "transparent"
        }

        SplineSeries {
            id: lineSeries3
            name: "LineSeries"
            color: "transparent"
            width: 8
            XYPoint { x: 0; y: 0 }
            XYPoint { x: 1.1; y: 3.1 }
            XYPoint { x: 1.9; y: 2.3 }
            XYPoint { x: 2.1; y: 1.1 }
            XYPoint { x: 2.9; y: 3.9 }
            XYPoint { x: 3.4; y: 3.0 }
            XYPoint { x: 4.1; y: 2.3 }
        }
    }

For more control and possibilities, you should probably do it in C++. Hopefully some specialist in graphical effects wil l be able to help you.

[neda]

Thank you very much.
How can I gradient the chart?
Like this:

[Diracsbracket]

@neda
I don't know if that's possible in QML, given that QML has a more limited API than the C++ classes. In particular, there seems to be no way to change the brush used to draw the series.

In this C++ example:
https://doc.qt.io/qt-5/qtcharts-customchart-example.html
you can change the brush of the pen you use for the plotted lines.

To get the above picture, I just defined the following gradient:

    QRadialGradient gr(300, 100, 100, 60, 60);
    gr.setColorAt(0.0, QColor(255, 0, 0, 191));
    gr.setColorAt(0.2, QColor(255, 0, 127, 191));
    gr.setColorAt(0.9, QColor(150, 0, 200, 63));

and modified the pen to use it:

    // Customize series
    QPen pen(QRgb("#ff0000"));
    pen.setWidth(20);
    pen.setBrush(gr);
    series->setPen(pen);

(you may need to drag-resize the window to get the gradient center right).

However, as I wrote, I don't know much about graphics effects. There are probably methods to apply gradient masks, etc... Where are the specialists out there?

[neda]

@Diracsbracket

Thank you so much for your help I really appreciate it.

[Vijaykarthikeyan]

@Diracsbracket For the same logic,how to implement the same in QML..please i need your help