QtCharts - PolarChartView: How to reverse an axis?

pga4711

Hello,

I am trying to reverse an axis in a PolarChartView. Especially the angular axis are very important. I have this example code here for a demostration

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtCharts 2.3
import QtQuick.Layouts 1.12

Window {
    visible: true
    width: 800
    height: 400

    RowLayout {
        anchors.fill: parent

        ListModel {
            id: mdl
            ListElement { a: 47;  r: 10 }
            ListElement { a: 80;  r: 6  }
            ListElement { a: 110; r: 5  }
            ListElement { a: 139; r: 4  }
            ListElement { a: 155; r: 3  }
            ListElement { a: 170; r: 0  }
        }

        ChartView {
            Layout.fillHeight: true
            Layout.fillWidth: true
            legend.visible: false
            Layout.column: 0
            Layout.row: 0

            ValueAxis {
                id: axisX
                min: 0
                max: 10
                reverse: reverse_Switch2.checked
                visible: true
                onReverseChanged: console.log("axisX.reverse: " + reverse)
            }

            ValueAxis {
                id: axisY
                visible: true
                min: 0
                max: 360
                reverse: reverse_Switch1.checked
                onReverseChanged: console.log("axisY.reverse: " + axisY.reverse)
            }

            LineSeries {
                id: lineSeries
                axisX: axisX
                axisY: axisY
                visible: true
            }

            Component.onCompleted: {
                for (var i = 0; i < mdl.count ; i++) lineSeries.append(mdl.get(i).r, mdl.get(i).a)
            }
        }

        PolarChartView {
            Layout.fillHeight: true
            Layout.fillWidth: true
            legend.visible: false
            Layout.column: 1
            Layout.row: 0

            ValueAxis {
                id: axisAngular
                min: 0
                max: 360
                reverse: reverse_Switch2.checked  //This is important to work, but it do not work. :<
                tickCount: 9
                onReverseChanged: console.log("axisAngular.reverse: " + reverse)
            }

            ValueAxis {
                id: axisRadial
                min: 0
                max: 10
                reverse: reverse_Switch1.checked
                tickCount: 6
                onReverseChanged: console.log("axisRadial.reverse: " + reverse)
            }

            SplineSeries {
                id: splineSeries
                axisAngular: axisAngular
                axisRadial: axisRadial
                pointsVisible: true
            }

            Component.onCompleted: {
                for (var i = 0; i < mdl.count ; i++) splineSeries.append(mdl.get(i).a, mdl.get(i).r)
            }
        }

        ColumnLayout {
            Switch { id: reverse_Switch1 }

            Switch { id: reverse_Switch2 }
        }
    }
}

Here is a GIF of how this example behaves. So to the left we have an ordinary ChartView where we can reverse the different axis. To the left we have this PolarChartView where we also trying to reverse the axis. But flipping this reverse property in the ValueAxis does not create the desired effect :/

I used a raster-editing program to show you the desired effect.

How to actually reverse the axis in the PolarChartView? Someone who know? Maybe there is a bug? How to think here? :)