mafulechkaJune 24, 2019, 4:48 a.m.

Qt Support - Aligning Chart Views to Each Other

One thing that comes up in support from time to time is that when you have multiple chart types, it's good to align them to each other so that the actual chart size is the same for both charts. If you have the same axle sizes this is easy to achieve as they will take up the same width and align accordingly. However, if it isn't, which is often the case, then we can use margins to force it to take on the desired dimensions.

So let's imagine our graph currently looks like this:

If you are using C++ for your chart code, this can be achieved with a single slot that can be connected to the QChart::plotAreaChanged() signal.
First we need to prevent recursion since we'll be changing fields, but since we want the internals to keep doing their thing, we won't block the signals. To do this, we'll have a static boolean that we'll set to true to indicate that we're in the middle of our calculations:

void updatePlotArea(const QRectF &area)
        static bool fixing = false;
        if (fixing)
        fixing = true;

The next thing we need to do is determine which chart is best to use to equalize the others. This means picking the one with the largest left value for the plot area (i.e. the one with the widest axis). We are currently using "modified" as a starting point, and if there are any, we are changing the margins for them, as this will provide the largest size available for the plot area at any given point for the largest axis.

QChart *bestChart = (QChart *)sender();
         QRectF bestRect = area;
         foreach(QChart *chart, charts) {
            if (chart->plotArea().left() > bestRect.left()) {
                bestChart = chart;
                bestRect = chart->plotArea();
                chart->setMargins(QMargins(20, 0, 20, 0));

Then, with the exception of the one that happens to be the "best" (bestChart), we adjust the margins to make sure they match the "best" and align correctly, setting the margins to be the existing margin plus the difference between the area of the "best" chart and the current one. Finally, we send any published events to be immediately updated for us.

foreach(QChart *chart, charts) {
        if (bestChart != chart) {
            const int left = chart->margins().left() +
                (bestRect.left() - chart->plotArea().left());
            const int right = chart->margins().right() +
                (chart->plotArea().right() - bestRect.right());
            chart->setMargins(QMargins(left, 0, right, 0));
    fixing = false;

This will give us two aligned plots that look like this:

As far as QML is concerned, we can do something similar through a function that is called with onPlotAreaChanged .

property bool fixing: false
    property var chartViews: [chartview, chartview_b]
    function updatePlotArea(chart, area) {
        if (fixing)
        fixing = true
        var tmpChart
        var bestRect = chart.plotArea
        var bestChart = chart
        for (var i = 0; i  Math.ceil(bestRect.left) ||
           (Math.ceil(tmpChart.plotArea.left) === 
            Math.ceil(bestRect.left) &&
            Math.floor(tmpChart.plotArea.right) < 
            Math.floor(bestRect.right))) {
                bestChart = tmpChart;
                bestRect = tmpChart.plotArea;
        bestRect.left = Math.ceil(bestRect.left)
        bestRect.right = Math.floor(bestRect.right)
        for (i = 0; i < chartViews.length; i++) {
            tmpChart = chartViews[i]
            if (tmpChart !== bestChart) {
                var newLeft = 20 + bestRect.left -
                var newRight = 20 +
                      Math.ceil(tmpChart.plotArea.right) -
                tmpChart.margins.left = newLeft
                tmpChart.margins.right = newRight
        fixing = false;

The only difference is that we account for the fact that the plot area uses real values and the fields are still integer based, so we make some extra credentials as a result.

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
Support the author Donate


Only authorized users can post comments.
Please, Log in or Sign up

Let me recommend you a great European Fornex hosting.

Fornex has proven itself to be a stable host over the years.

For Django projects I recommend VPS hosting

Following the link you will receive a 5% discount on shared hosting services, dedicated servers, VPS and VPN

View Hosting

Qt - Test 001. Signals and slots

  • Result:47points,
  • Rating points-6

C++ - Test 001. The first program and data types

  • Result:13points,
  • Rating points-10
  • Maks
  • Sept. 18, 2022, 7:04 a.m.

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:70points,
  • Rating points1
Last comments

Engineering solution of a cubic equation using Vieta&#39;s trigonometric formula

красивое домашнее порно анал порно молодых русских бесплатно без регистрации порно знакомства онлайн порно блондинка с большой попой …

Qt/C++ - Lesson 035. Downloading files via HTTP with QNetworkAccessManager

Попробуйте просто вызвать метод getData в конструкторе класса

Qt/C++ - Lesson 035. Downloading files via HTTP with QNetworkAccessManager

Здравствуйте! Подскажите, пожалуйста, как сделать так, чтобы программа срабатыала без нажатия кнопки? Ну чисто при загрузке формы... Я так понимаю, надо что-то поменять в этой строчке con…

Qt/C++ - Lesson 051. QMediaPlayer – simple audio player

Здравствуйте. Подскажите пожалуйста, как решить проблему multimedia модуль не распознается

Qt/C++ - Lesson 009. QTimer – How to work with timer?

Да, именно так. Но в коде без this написано - это ошибка в статье.
Now discuss on the forum

Sorting the added QML elements in the ListModel

I am writing an alarm clock in QML, I am required to sort the alarms in ascending order (depending on the date or time (if there are several alarms on the same day). I've done the sorting …

Вопрос по Qt Creator

Добрый день. Не знаю, подобную проблему я не решал.

Задать другой класс div-у

Добрый день. Попробуйте использовать Selenium. Это библиотека есть в виде Python модуля и она позволяет загружать страницу и манипулировать html элементами. Как я понимаю, в ней можно…

Списки на QML

Вопрос решен с применением базы данных. Кому интересно, можете поюзать проект:) Отдельное спасибо Евгению за помощь)))Вход под админом Логин:1, пароль:1Вход под диспетчером Логин:22, пароль:2Вх…

Хочу переместить QMenuBar

Просто взять и заменить в пару строчек не получится. Qt предусматривает крайне ограниченный функционал по работе с обрамлением окон, к которому относится заголовок окна. Вообще это фу…
© EVILEG 2015-2022
Recommend hosting TIMEWEB