Center background image in QChart

EliSno

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);

raven-worx

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

EliSno

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);

fem_dev

@EliSno could you please post here a print screen of this final result showing the QChart + background image?
Another thing: I'm trying to execute your source-code above, but I got some errors and I would like to understand it:

What type of component is the LchMapChartView. Where is it?

raven-worx

@fem_dev
the whole source code is posted.
why not simply give it try yourself?

fem_dev

I found a solution and post it here: link