Center background image in QChart



  • I added a jpeg image to the plot area background of my chart and scaled the image based on the size reported by chart->plotarea().width() and chart->plotarea().height() but the image isn't centered. Is there any way to center the image? Maybe add an offset somewhere to the plotAreaBackgroundBrush?

    //Build a series to add to the chart
    QLineSeries *series = new QLineSeries();
    *series << QPointF(11, 1) << QPointF(13, 3) << QPointF(17, 6) << QPointF(18, 3) << QPointF(20, 2);
    
    //Create a chart object and format
    QChart *chart = new QChart();
    chart->legend()->hide();
    chart->addSeries(series); //add the series
    chart->createDefaultAxes();
    chart->axisX()->setGridLineVisible(false);
    chart->axisY()->setGridLineVisible(false);
    
    //Bring in the background image
    QImage skyplot("SkyPlot.jpg");
    if (skyplot.isNull())
       return;
    
    //Add the chart to the view widget
    ui->LchMapChartView->setChart(chart);
    ui->LchMapChartView->setRenderHint(QPainter::Antialiasing);
    
    //Grab the size of the plot area
    qreal width = chart->plotArea().width();
    qreal height = chart->plotArea().height();
    
    //scale the image to fit plot area
    skyplot = skyplot.scaled(QSize(width,height));
    
    //Display image in background
    chart->setPlotAreaBackgroundBrush(skyplot);
    chart->setPlotAreaBackgroundVisible(true);
    

  • Moderators

    @EliSno
    QBrush doesn't provide this feature AFAIK.
    You can try to subclass QChart and override it's paint method. Then paint the background first and simply call it's base class implementation. No guarantee that this works though.



  • Thank you raven-worx. I found a work around where I didn't have to subclass. I basically repainted the image with offsetting the image with Qt::white to make it fit. Turns out that setPlotAreaBackgroundBrush() starts the image in the top left corner of the ChartView and not the plot area. Below is my work around:

    //Build a series to add to the chart
    QLineSeries *series = new QLineSeries();
    *series << QPointF(11, 1) << QPointF(13, 3) << QPointF(17, 6) << QPointF(18, 3) << QPointF(20, 2);
    
    //Create a chart object and format
    QChart *chart = new QChart();
    chart->legend()->hide();
    chart->addSeries(series); //add the series
    chart->createDefaultAxes();
    chart->axisX()->setGridLineVisible(false);
    chart->axisY()->setGridLineVisible(false);
    
    //Bring in the background image
    QImage skyplot("SkyPlot.jpg");
    if (skyplot.isNull())
       return;
    
    //Add the chart to the view widget
    ui->LchMapChartView->setChart(chart);
    ui->LchMapChartView->setRenderHint(QPainter::Antialiasing);
    
    //Note: Since we added the chart to the view we can now
    //scale and translate the image appropriately. The chart
    //has an appropriate size.
    
    //Grab the size of the plot and view areas
    qreal width = chart->plotArea().width();
    qreal height = chart->plotArea().height();
    qreal ViewW = ui->LchMapChartView->width();
    qreal ViewH = ui->LchMapChartView->height();
    
    //scale the image to fit plot area
    skyplot = skyplot.scaled(QSize(width,height));
    
    //We have to translate the image because setPlotAreaBackGround
    //starts the image in the top left corner of the view not the
    //plot area. So, to offset we will make a new image the size of
    //view and offset our image within that image with white
    QImage translated(ViewW, ViewH, Image::Format_ARGB32);
    translated.fill(Qt::white);
    QPainter painter(&translated);
    QPointF TopLeft = chart->plotArea().topLeft();
    painter.drawImage(TopLeft, skyplot);
    
    //Display image in background
    chart->setPlotAreaBackgroundBrush(translated);
    chart->setPlotAreaBackgroundVisible(true);

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.