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

Customize qtChart



  • Hi,

    I would like to customize my QtChart to have the 3 colors (green, yellow, red) on the range slider at the background of the chart (instead of the shades) :

    Capture.JPG

    How can I do that in QML ?

    Regards
    Stéphane



  • Ok I found it :
    Capture.JPG

    I call this function each time the QSliderRange change :

    void Controller::updateBackground(QQuickItem* item){
        if(item){
            if(QGraphicsScene *scene = item->findChild<QGraphicsScene *>()){
                for(QGraphicsItem *it : scene->items()){
                    if(QtCharts::QChart *chart = dynamic_cast<QtCharts::QChart *>(it)){
                        // Customize plot area background
                        QImage background(item->width(), item->height(), QImage::Format_ARGB32);
                        if (background.isNull())
                            continue;
                        background.fill(QColor(Qt::white));
                        QPainter painter(&background);
    
                        int margin = (item->height()-chart->plotArea().height()) /2;
                        int hRed = (10- _pData->threshHigh)/10 * chart->plotArea().height();
                        int hGreen = _pData->threshLow/10 * chart->plotArea().height();
                        int hYellow = chart->plotArea().height() - hRed - hGreen;
    
                        // Red zone
                        painter.fillRect(0, 0, item->width(), margin + hRed, QBrush(QColor(255,50,50,128)));
                        // Yellow zone
                        painter.fillRect(0,margin+hRed, item->width(), hYellow, QBrush(QColor(235,220,50,128)));
                        // Green zone
                        painter.fillRect(0,margin+hRed+hYellow, item->width(), margin+hGreen, QBrush(QColor(100,150,100,128)));
    
                        chart->setPlotAreaBackgroundBrush(background);
                        chart->setPlotAreaBackgroundVisible(true);
                    }
                }
            }
        }
    }
    
    
    

    By passing the ChartView as parameter :

    sThresh.first.onValueChanged:     controller.updateBackground(chart)
    sThresh.second.onValueChanged:    controller.updateBackground(chart)
    

Log in to reply