HelloGraphs | Qt Graphs | Qt 6.12.0
Description: Using Graphs for 2D in a Qt Quick application.
Keywords: example

- Qt 6.12
- Qt Graphs
- HelloGraphs
- Qt Graphs | Commercial or GPLv3

# HelloGraphs

Using Graphs for 2D in a Qt Quick application.

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