QML chart has border space instead of filling whole parent

EqiupmentConnected

I want this QML chartview to fill the entire rectangle, but it has a white border area. How can I make it fill the entire space? I've used it in other programs where it fills the whole thing by default, I can't figure out what causes it to have a border in this case.

alt text

import QtQuick 2.15
import QtCharts 2.15
import QtQuick.Controls

Window
{
    id: window1

    visible: true
    width: 640
    height: 480

    Rectangle
    {
        id: echoChart

        anchors.fill:parent

        ChartView
        {
            title: "Echo Graph"
            anchors.fill: parent
            antialiasing: true
            backgroundColor: "black"

            ValuesAxis
            {
                id: valueAxis
                min: 2000
                max: 2011
                tickCount: 12
                labelFormat: "%.0f"
            }

            AreaSeries
            {
                axisX: valueAxis
                upperSeries: LineSeries
                {
                    XYPoint { x: 2000; y: 1 }
                    XYPoint { x: 2001; y: 1 }
                    XYPoint { x: 2002; y: 1 }
                    XYPoint { x: 2003; y: 1 }
                    XYPoint { x: 2004; y: 1 }
                    XYPoint { x: 2005; y: 0 }
                    XYPoint { x: 2006; y: 1 }
                    XYPoint { x: 2007; y: 1 }
                    XYPoint { x: 2008; y: 4 }
                    XYPoint { x: 2009; y: 3 }
                    XYPoint { x: 2010; y: 2 }
                    XYPoint { x: 2011; y: 1 }
                }
            }
        }
    }
}

sierdzio

Try setting margins property, maybe they are not zero by default: https://doc.qt.io/qt-6/qml-qtcharts-chartview.html#margins-prop

mzimmers

@sierdzio you are indeed correct:

 ChartView {
    id: chartView
    Component.onCompleted: {
        console.log(chartView.margins.left)
        console.log(chartView.margins.right)
        console.log(chartView.margins.top)
        console.log(chartView.margins.bottom)

produces:

14:20:16: Starting Qt_projects\chartview\build\Desktop_Qt_6_5_3_MinGW_64_bit-Debug\appchartview.exe...
qml: 20
qml: 20
qml: 20
qml: 20

sierdzio

That's weird! But at least it makes the issue clear.

EqiupmentConnected

How can I change the margin value? I tried

        margins.left: 0
        margins.right: 0
        margins.bottom: 0
        margins.top: 0

It doesn't change it, also making the numbers bigger does nothing as well. I did find a hack to solve it though, set the rectangle color to be the same as the chart will make it appear as if there is no border.

mzimmers

Hmm...my experimentation seemed to produce the same results. This might be worth reporting as a bug.

sierdzio

This might be a bug or "feature" of this component, then. You can file a report about it on Qt bug tracker.