How to remove spacing? QML ChartView

Does anyone know how to remove this spacing?

Those lines below reduce them but not completely remove.

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

UPDATE I added some code. May be this could help to identify my problem. Originally those blank spaces where arrows are located are for legend and tick values. I quess without changing a source code I can do nothing.

ScopeView.qml

import QtQuick 2.0
import QtCharts 2.1

ChartView {
    id: chartView

    animationOptions: ChartView.NoAnimation
    theme: ChartView.ChartThemeQt
    legend.visible: false

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

    backgroundRoundness: 0

    property bool openGL: true
    onOpenGLChanged: {
        series("signal 1").useOpenGL = openGL;
    }

    ValueAxis {
        id: axisY1
        min: -1
        max: 4
        labelsVisible: false
        tickCount: 3

        color: "transparent"
    }

    ValueAxis {
        id: axisX
        min: 0
        max: 1024

        labelsVisible: false
        tickCount: 4

        color: "transparent"
    }

    LineSeries {
        id: lineSeries1
        name: "signal 1"
        axisX: axisX
        axisY: axisY1
        useOpenGL: chartView.openGL
        color: "#44D77B"
    }

    Timer {
        id: refreshTimer
        interval: 1 / 60 * 1000 // 60 Hz
        running: true
        repeat: true
        onTriggered: {
            dataSource.update(chartView.series(0));
        }
    }

    function changeSeriesType(type) {
        chartView.removeAllSeries();

        // Create two new series of the correct type. Axis x is the same for both of the series,
        // but the series have their own y-axes to make it possible to control the y-offset
        // of the "signal sources".
        if (type == "line") {
            var series1 = chartView.createSeries(ChartView.SeriesTypeLine, "signal 1",
                                                 axisX, axisY1);
            series1.useOpenGL = chartView.openGL
        } else {
            var series1 = chartView.createSeries(ChartView.SeriesTypeScatter, "signal 1",
                                                 axisX, axisY1);
            series1.markerSize = 2;
            series1.borderColor = "transparent";
            series1.useOpenGL = chartView.openGL
        }
    }

    function createAxis(min, max) {
        // The following creates a ValueAxis object that can be then set as a x or y axis for a series
        return Qt.createQmlObject("import QtQuick 2.0; import QtCharts 2.0; ValueAxis { min: "
                                  + min + "; max: " + max + " }", chartView);
    }

    function setAnimations(enabled) {
        if (enabled)
            chartView.animationOptions = ChartView.SeriesAnimations;
        else
            chartView.animationOptions = ChartView.NoAnimation;
    }

    function changeRefreshRate(rate) {
        refreshTimer.interval = 1 / Number(rate) * 1000;
    }
}

UPDATE II

The trick was to use clip and put the chartView into a rectangle.

Rectangle {
    id: canvas
    anchors{
        left: parent.left
        right: parent.right
        top: parent.top
    }
    height: 250
    color: "#FFFFFF"
    z: propText.z - 1

    clip: true

    Rectangle {
        width: parent.width
        height: 40

        z: 1

        color: "#FFFFFF"
    }

    GraphView{ //ChartView
        id: graphView
        isTimerRunnig: isRunning
        channelId: channelId
    }
}

and ChartView aka GraphView

ChartView {
id: chartView

property alias channelId: dataSource.channelId
property alias isTimerRunnig: refreshTimer.running
property bool openGL: true

antialiasing: !openGL
legend.visible: false

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

x: -70
y: 20

width: 360
height: 262

backgroundRoundness: 0


onOpenGLChanged: {
    series("signal 1").useOpenGL = openGL;
}

DataSource {
    id: dataSource
    channelId: channelId
    isPaused: !isTimerRunnig

    onIsPausedChanged: {
        if(isPaused){
            lineSeries1.clear()
        }
    }
}

ValueAxis {
    id: axisY

    //gridVisible: false
    labelsVisible: false
    tickCount: 3

    color: "transparent"
}

ValueAxis {
    id: axisX
    min: 0
    max: 100

    //gridVisible: false
    labelsVisible: false
    tickCount: 4

    color: "transparent"
}

LineSeries {
    id: lineSeries1
    name: "signal 1"
    axisX: axisX
    axisY: axisY
    useOpenGL: chartView.openGL
    color: "#44D77B"
    width: 2
}

Timer {
    id: refreshTimer
    interval: 1 / 25 * 1000 // 25 Hz
    running: isTimerRunnig
    repeat: true
    onTriggered: {
        dataSource.updateFromQML(chartView.series(0), chartView.axisY(chartView.series(0)))
        //dataSource.printChannelId()
    }
}

}

Possible solution 1: QMargins property designates the minimum area around the plotting area. Try filling this remaining padding by adjusting the child (plot) itself.

plotArea : rect The area on the ChartView that is used for drawing series. This is the ChartView rect without the margins.

Possible solution 2: Try to redraw the parent layout after setting the margins. If you are adjusting the margins after the window is created, it may not necessarily refresh the view immediately.

How to completely remove margins/spacing with QML ChartView , The question is the same as in this thread: Re: How to remove spacings? QML ChartView. @MikhailG posted the same question on  Re: How to remove spacings? QML ChartView. @MikhailG posted the same question on StackOverflow and apparently this answer solves it: Possible solution 1: QMargins property designates the minimum area around the plotting area. Try filling this remaining padding by adjusting the child (plot) itself. But what does that mean?

I had the same issue, but couldn't quite understand what the accepted answer meant in solution 1. I found a solution to the problem that worked for me, so I will post it as another answer here.

(I would've liked to know more specifically what the accepted soultion is, but I cannot comment on other people's answers yet.)

My solution is in any case (in addition to setting the margins to 0 as shown in the question, and having the legend and the axes not be visible):

ChartView
{
    x: -10
    y: -10

    width: parent.width + 20
    height: parent.height + 20
}

Which simply manually moves the plotting area of the Chartview to the top left corner of the parent component and resizes it appropriately. I don't know where the number 10 comes from, but that seems to be the size of the remaining margin. The "real" answer to this question would be how to set that to 0 in a more robust way.

If this answer is the same as the one refered to in the accepted answer, or if that answer is indeed a more robust one, please let me know!

QML: how to fire an event on item param chenge (and pass to it its , Say having a RectComp.qml: Item{ property alias currentX: rect.x Rectangle { id: rect x: 617 QML ChartView. Does anyone know how to remove this spacing? QML ChartView doesn't fill the parent, instead it leaves always margins. See the attached image and the green area around the the ChartView. Add property to control margins.

Another trick is to add this following lines to ChartView

anchors { fill: parent; margins: -15 }
margins { right: 0; bottom: 0; left: 0; top: 0 }

QML adding two inputs and returning result - qt - iOS, Does anyone know how to remove this spacing? ScopeView.qml import QtQuick 2.0 import QtCharts 2.1 ChartView { id: chartView animationOptions:  How to change color of one particular point in chartview in qml.i.e now all x axis values are displaying in black color but i want odd number to be displayed in red color.I want as shown in image where label colors in y axis are of different colors. here is my piece of code

I had same bug with modal dialog: white border around the dialog and somehow solved it with:

contentItem: Rectangle {
    anchors.fill: parent
    color: "black"
    border.width: 1
    ...
}

Here I solved it by settings margins to zero and wrapping ChartView into another Rectangle with same background color as setting negative fixed margins is not quite correct as necessary values could be different:

Item {
    Rectangle {
        color: "black"
        anchors.fill: parent
    }

    ChartView {
        id: chart
        anchors.fill: parent
        antialiasing: true
        margins { top: 0; bottom: 0; left: 0; right: 0 }
//        plotArea: Qt.rect(0, 0, width, height)
        backgroundColor: "black"
        backgroundRoundness: 0
        legend.visible: false
        ...
    }
}

Commented out plotArea: Qt.rect(0, 0, width, height) might solve the issue as well but it don't: as axis and axis labels disappear in this case for some reason.

How to reduce amount of whitespace around chart? in UI for , By default charts have a lot of white space between the chart elements (that is, the axis labels on the left and bottom and the chart edge on the  The theme used by the chart. A theme is a built-in collection of UI style related settings applied to all the visual elements of a chart, such as colors, pens, brushes, and fonts of series, as well as axes, title, and legend.

Qml columnlayout, the mouse area that will intercept the event. anchors. delete var engine = newQQmlApplicationEngine 4 ColumnLayout { spacing: 0 Rectangle { Layout. Feb 05, 2017 · QML ChartView Alignments I am attempting to display multiple QML  A legend is a graphical object that displays the legend of a chart. The legend state is updated by the ChartView type when series change. The Legend type properties can be attached to the ChartView type. For example:

qgroundcontrol/PIDTuning.qml at master · mavlink/qgroundcontrol , Cross-platform ground control station for drones (Android, iOS, Mac OS, Linux, Windows) - mavlink/qgroundcontrol. Stack Overflow Public questions and answers; How to add a rectangle to a QML ChartView? How to Remove Spacing between chartview and it's Plotarea in QML. 1.

QML: Custom draggable point delegate for ChartView series, Hello, I think, if you want write own design for series in QML ChartView, then you need inherit it from Q QAbstractSeries in C++, and override  This application shows you how to create your own custom legend instead of using the built-in legend of ChartView API. The main view of the application shows a stacked area chart. This is how one of the stacked areas is created. See ChartViewStacked.qml and AnimatedAreaSeries.qml. Running the Example

Comments
  • where is your .qml code?
  • @Nulik please check up my update.
  • Meanwhile there a relevant feature request at Qt's bug-tracker. Anyone who is interested in "fixing" this on Qt's side, please vote for the feature.
  • The problem is connected to the axes. If I set both axes to invisible the margin disappears. It's a first step, albeit not a solution.
  • You know, you are correct thank you. The first approach is the way it works.
  • @Doğukan Tunç: Can you provide an example for the solution 1? If I change any of the members of plotArea, the chart becomes corrupted.
  • Could You provide and example for 1st solution please?! plotArea does not work for me correctly. If I set it to Qt.rect(0, 0, width, height) I see no axis there and their labels.
  • @Mikhail Is this the same solution you found?
  • it was quite a long time ago. Yes that solution was a bit hacky, and I had to found a new one. The trick was to use clip.
  • @Mikhail Hacky indeed! How did you use clip? Chartview doesn't have the property, neither does a Window, and putting it inside a rectangle doesn't seem to help either. Sorry to bother you about this old problem, but it really annoys me that I can't quite get it working, though the hacky solution works.
  • @Mikhail Thanks!