Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

formatting a ChartView



  • Hi all -

    Customer wants something that looks like this:
    chart.PNG
    The very small dark blue rectangle is supposed to be the bar itself; the light blue is the background (accent).

    So, I was thinking of using a ChartView for this.

        ChartView {
            height: 300
            width: 100
            anchors.top: spacer2.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            legend.visible: false
            antialiasing: true
    
            StackedBarSeries {
                id: mySeries
                axisYRight: BarCategoryAxis {
                    visible: true
                    labelsVisible: true
                }
                barWidth: 0.96
                BarSet {
                    values: [0.1]
                    color: reagentPlotColor
                }
                BarSet {
                    values: [1.9]
                    color: reagentPlotBackgroundColor
                }
            }
        }
    

    I'm having trouble getting it properly formatted, though:
    mychart.PNG

    So:

    1. does a ChartView seem like a good way to do this, or is it overkill?
    2. how do I get the scale to appear on the right (or at all)?
    3. any idea why the chart isn't honoring my request for a width of 100 px?

    Thanks...



  • So, after some experimentation, I've managed to get it to look like this:chart.PNG
    Here's the code:

        ChartView {
            width: parent.width
            height: 300
            anchors.horizontalCenter: parent.horizontalCenter
            antialiasing: true
            title: 'Reagents Level'
    
            StackedBarSeries {
                id: mySeries
                labelsVisible: false
                axisY: BarCategoryAxis {
                    gridVisible: false
                }
                barWidth: 0.33
                BarSet {
                    values: [0.1]
                    color: reagentPlotColor
                }
                BarSet {
                    values: [1.9]
                    color: reagentPlotBackgroundColor
                }
            }
        }
    

    So, some specific questions:

    1. is there such a thing as an individual Bar, or is it correct to use BarSet when you only have one?
      How do I get rid of:
    • the color legend above the bar
    • the number "1" below the bar
    • the vertical line on the left
    1. can I get a scale indicator on the right side, and if so, can I have control over the granularity?

    Thanks...



  • Some more experimentation; my chart now looks like this:

    chart.PNG

    Any suggestions on getting the "1" and the vertical line on the left to disappear? I mean, I could just draw white rectangles over them, but...

    Thanks...



  • Define an axis for the x axis. It has settings to hide it.



  • @fcarney oh, that's very helpful:

          ValueAxis {
            id: valueAxisX
            labelsVisible: false
            gridVisible: false
          }
    

    This gets rid of both that "1" AND the left side line. No need for the rectangle hacks!

    So...where was that "1" coming from, anyway? It wasn't a label; I say this because when I remove the "labelsVisible: false" I get this:
    chart.PNG

    What would be ideal is if I could change that 1 to my own text. Customer wants the title below the chart, not above it, which doesn't seem to be an option in ChartView, but if I could repurpose that "1" I could kill two birds with one stone.

    Thanks...



  • https://doc.qt.io/qt-5/qml-qtcharts-abstractaxis.html#alignment-prop

    I don't know what the key/legend is called in the chart. Look around and see if it has a way to move it. The above link shows how to align an axis. Not sure if that helps or not.



  • @fcarney yeah, I think I can't use the legend, because that includes the little colored box which I don't want.

    It's still a mystery to me where that 1 is/was coming from, but I think I'll just superimpose a label (hacky, hacky).

    Thanks for the assistance.



  • @mzimmers I think the 1 comes from not explicitly creating an axis. So it made one up. Probably default axis or something.


Log in to reply