Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Gradient color and glow on chart



  • Hi guys,
    I wanna to have gradient color and glow on chart.
    Like this picture:
    0_1535956192080_Capture.JPG
    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



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

    0_1536001695648_5e87a369-a28a-4c82-abff-b8f8e7c649ab-image.png

    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.



  • Thank you very much.
    How can I gradient the chart?
    Like this:
    0_1536031598400_Capture.JPG



  • @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.

    0_1536035082412_29eeb7d4-5c09-4355-bf54-cb57e980b30d-image.png

    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?



  • @Diracsbracket

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


Log in to reply