HelloGraphs

HelloGraphs shows how to make a simple 2D bar graph and line graph.

The following sections describe how to create a bar graph using BarSeries and a line graph using LineSeries.

Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, see Qt Creator: Tutorial: Build and run.

BarGraph

The first graph in the example is a bar graph. Creating it starts with a GraphsView component, setting the X axis, Y axis and theme. X axis is a BarCategoryAxis with 3 categories. Both the vertical grid and the axis lines are hidden. Y axis is a ValueAxis with visible range between 20 and 100. Major ticks with labels will be shown on every 10 values using tickInterval. Subticks will be shown on every 1 values using subTickCount 9, which means that between every major tick there will be 9 minor ones. Lastly, theme is added to one which is suitable on dark backgrounds. This theme adjusts the graph background grid, axis lines and labels.

GraphsView {
    anchors.fill: parent
    anchors.margins: 16
    axisX: BarCategoryAxis {
        categories: [2024, 2025, 2026]
        gridVisible: false
        subGridVisible: false
    }
    axisY: ValueAxis {
        min: 20
        max: 100
        tickInterval: 10
        subTickCount: 9
    }
    theme: GraphsTheme {
        colorScheme: GraphsTheme.ColorScheme.Dark
        theme: GraphsTheme.Theme.QtGreen
    }
    ...

To make this a bar graph, add a BarSeries.

BarSeries {
    ...

Then data is added into BarSeries using BarSet. There are 3 bars with defined custom bars color and border properties. These properties will override the possible seriesColors set for the GraphsTheme.

BarSet {
    values: [82, 50, 75]
    borderWidth: 2
    color: "#373F26"
    borderColor: "#DBEB00"
}

LineGraph

The second graph of the example is a line graph. It also starts by defining a GraphsView element. Custom GraphsTheme is created to get a custom appearance. GraphsTheme offers quite a wide range of customization possibilities for the background grid and axis, which get applied after the theme.

The GraphsView defines axisX and axisY suitable for this graph.

GraphsView {
    anchors.fill: parent
    anchors.margins: 16
    theme: GraphsTheme {
        readonly property color c1: "#DBEB00"
        readonly property color c2: "#373F26"
        readonly property color c3: Qt.lighter(c2, 1.5)
        colorScheme: GraphsTheme.ColorScheme.Dark
        seriesColors: ["#2CDE85", "#DBEB00"]
        grid.mainColor: c3
        grid.subColor: c2
        axisX.mainColor: c3
        axisY.mainColor: c3
        axisX.subColor: c2
        axisY.subColor: c2
        axisX.labelTextColor: c1
        axisY.labelTextColor: c1
    }
    axisX: ValueAxis {
        max: 5
        tickInterval: 1
        subTickCount: 9
        labelDecimals: 1
    }
    axisY: ValueAxis {
        max: 10
        tickInterval: 1
        subTickCount: 4
        labelDecimals: 1
    }
    ...

Custom Delegate component is used to visualize the data points.

component Marker : Rectangle {
    width: 16
    height: 16
    color: "#ffffff"
    radius: width * 0.5
    border.width: 4
    border.color: "#000000"
}

To make this a line graph, add a LineSeries. This sets the pointDelegate to use the custom Delegate component that was created earlier. Data points are added using XYPoint elements.

LineSeries {
    id: lineSeries1
    width: 4
    pointDelegate: Marker { }
    XYPoint { x: 0; y: 0 }
    XYPoint { x: 1; y: 2.1 }
    XYPoint { x: 2; y: 3.3 }
    XYPoint { x: 3; y: 2.1 }
    XYPoint { x: 4; y: 4.9 }
    XYPoint { x: 5; y: 3.0 }
}

The second line series is similar to the first. As this is second LineSeries inside the GraphsView, second color from the seriesColors gets automatically picked.

LineSeries {
    id: lineSeries2
    width: 4
    pointDelegate: Marker { }
    XYPoint { x: 0; y: 5.0 }
    XYPoint { x: 1; y: 3.3 }
    XYPoint { x: 2; y: 7.1 }
    XYPoint { x: 3; y: 7.5 }
    XYPoint { x: 4; y: 6.1 }
    XYPoint { x: 5; y: 3.2 }
}

Example project @ code.qt.io