Project Configuration

Add the Qt Charts module to your qmake project file to enable access to QChart related components:

QT += charts

Header File Declarations

Include required headers and define private member variables in your widget clas header file:

#include <QChartView>
#include <QtCharts>
#include <QChart>

private:
    QChart *m_tempTrendChart;
    QDateTimeAxis *m_timeAxis;
    QValueAxis *m_tempAxis;
    QSplineSeries *m_tempSplineSeries;

Core Implementation

Implement the chart initialization and rendering logic in your .cpp file, using temperature variation over time as the sample use case:

void initTemperatureTrendChart()
{
    // Instantiate core chart components
    m_tempTrendChart = new QChart();
    m_tempSplineSeries = new QSplineSeries();
    m_tempSplineSeries->clear();
    m_timeAxis = new QDateTimeAxis();
    m_tempAxis = new QValueAxis();

    // Define X-axis time range (30 minutes from current time)
    QDateTime startTime = QDateTime::currentDateTime();
    QDateTime endTime = startTime.addSecs(1800);

    // Configure X-axis properties
    m_tempTrendChart->setTitle("Temperature Variation Trend");
    m_timeAxis->setTitleText("Timestamp");
    m_timeAxis->setTitleBrush(Qt::white);
    m_timeAxis->setFormat("hh:mm:ss");
    m_timeAxis->setRange(startTime, endTime);
    m_timeAxis->setTickCount(10);

    // Configure Y-axis properties
    m_tempAxis->setTitleText("Temperature (℃)");
    m_tempAxis->setTitleBrush(Qt::white);
    m_tempAxis->setLabelFormat("%.1f");
    m_tempAxis->setRange(0, 25);
    m_tempAxis->setTickCount(10);

    // Bind data series and axes to chart canvas
    m_tempSplineSeries->setName("Real-time Temperature Reading");
    m_tempTrendChart->addSeries(m_tempSplineSeries);
    m_tempTrendChart->setAxisX(m_timeAxis, m_tempSplineSeries);
    m_tempTrendChart->setAxisY(m_tempAxis, m_tempSplineSeries);

    // Configure chart appearance
    // m_tempTrendChart->setTheme(QChart::ChartThemeDark);
    m_tempTrendChart->setBackgroundVisible(false);
    m_tempTrendChart->legend()->setVisible(true);
    m_tempTrendChart->legend()->setAlignment(Qt::AlignBottom);
    m_tempTrendChart->legend()->setLabelColor(Qt::white);
    m_tempTrendChart->setTitleBrush(Qt::white);
    m_tempTrendChart->axisX()->setLabelsColor(Qt::white);
    m_tempTrendChart->axisY()->setLabelsColor(Qt::white);

    // Attach chart to UI container (note: promote the target QWidget to QChartView in Qt Designer first)
    ui->widget_chartContainer->setChart(m_tempTrendChart);
    ui->widget_chartContainer->setRenderHint(QPainter::Antialiasing);

    // Insert sample temperature data points
    m_tempSplineSeries->append(startTime.toMSecsSinceEpoch(), 5);
    m_tempSplineSeries->append(startTime.addSecs(200).toMSecsSinceEpoch(), 5.5);
    m_tempSplineSeries->append(startTime.addSecs(500).toMSecsSinceEpoch(), 5.6);
    m_tempSplineSeries->append(startTime.addSecs(800).toMSecsSinceEpoch(), 5.8);
    m_tempSplineSeries->append(startTime.addSecs(1200).toMSecsSinceEpoch(), 6);
    m_tempSplineSeries->append(startTime.addSecs(1500).toMSecsSinceEpoch(), 7);
    m_tempSplineSeries->append(startTime.addSecs(1700).toMSecsSinceEpoch(), 12);
}

All text elements are set to white to ensure readability against a custom black widget background.