Skip to content

Bar charts

Use QAccelPlot.BarSeries for bar charts. Each bar is a (position, value) pair. Changing barWidth, barOffset, or baselineValue does not re-upload the data.

Draw bars

QAccelPlot.Plot {
    id: plot
    xAxis: QAccelPlot.Axis { viewportMin: -0.5; viewportMax: 3.5 }
    yAxis: QAccelPlot.Axis { viewportMin: 0; viewportMax: 10 }

    QAccelPlot.BarSeries {
        name: "Sales"
        xAxis: plot.xAxis
        yAxis: plot.yAxis
        Component.onCompleted: setData([4, 7, 5, 9])
    }
}

setData() takes numbers, placed at positions 0, 1, 2, …, or objects with position, value, and an optional category:

setData([{ position: 2020, value: 4 }, { position: 2021, value: 7 }])
Property Default Effect
barWidth 0.8 Bar width in position-axis data units
barOffset 0 Shift of every bar along the position axis
baselineValue 0 Value the bars start from
minimumWidth 1 Minimum drawn width in pixels
orientation Qt.Vertical Qt.Horizontal puts positions on the Y axis

Values below baselineValue extend the bar the other way. Set baselineValue: -Infinity to start the bars at the plot edge. On a logarithmic value axis, a baseline at or below zero also starts at the plot edge.

For category labels, use a TextTickLabelFormatter on the position axis.

Group bars

Use one series per group member. Split the group width between them and offset each by its index:

Repeater {
    model: ["North", "South", "West"]

    QAccelPlot.BarSeries {
        required property int index
        required property string modelData

        name: modelData
        xAxis: plot.xAxis
        yAxis: plot.yAxis
        barWidth: 0.8 / 3
        barOffset: (index - 1) * barWidth
        Component.onCompleted: setData(revenue[index])
    }
}

Give bars their own extent

A ranged bar spans from from to to along the position axis instead of being centered on a position:

setData([{ from: 0, to: 1, value: 4 }, { from: 1, to: 5, value: 7 }])

barWidth and barOffset do not apply to ranged bars. A series holds either ranged bars or position bars: when any object has from or to, all of them are ranged. Histograms are drawn this way.

Color bars by category

List the categories in categories as Category objects and give each bar a category:

QAccelPlot.BarSeries {
    categories: [
        QAccelPlot.Category { value: 0; name: "Profit"; color: "#4ade80" },
        QAccelPlot.Category { value: 1; name: "Loss"; color: "#f87171" }
    ]
    Component.onCompleted: setData(profit.map((value, month) => ({
        position: month,
        value: value,
        category: value >= 0 ? "Profit" : "Loss"
    })))
}
  • Each Category has an integer value and an optional name and color.
  • A bar's category is a value or, in QML, a name. Names resolve when the data is set; an unknown name or a non-whole number is ignored with a warning.
  • Bars without a category, or whose category has no color or is not listed, use color.
  • setDataPointCategories() replaces the bars' categories without changing the data.
  • The legend shows one row per category.

Outlines are set with border.width and border.color.

Color bars by value

Assign a Colormap to color each bar from colorSource:

QAccelPlot.BarSeries {
    colorSource: QAccelPlot.BarSeries.Position
    colormap: QAccelPlot.Colormap {
        preset: QAccelPlot.Colormap.Viridis
        min: 0
        max: 10
    }
}
colorSource Mapped to a color
BarSeries.Value (default) The bar's value
BarSeries.Position The bar's position; for a ranged bar, the middle of its edges as the colormap places them
  • The colormap overrides color and the category colors, and the legend shows one row for the series; hoverColor still marks the hovered bar.
  • min and max work as for point clouds. An unset bound resolves from the data, and ranged bars contribute both edges. dataValueMin and dataValueMax expose the resolved range.
  • Values outside the range take the color at its nearer end.
  • barOffset does not move a bar's position on the colormap.
  • Under logScale: true, a bar at or below zero keeps color or its category color. If an unset bound resolves from such a bar, the range is not positive and every bar keeps its color; set min above zero.
  • A ColorBar keys the series. To key a heatmap with a histogram of its values instead, see Use a histogram as a color bar.

Hover

hoveredIndex is the bar under the mouse pointer, or -1. barAt(index) returns its position, value, category, and categoryName; a ranged bar has from and to instead of position. Set hoverColor to highlight it. minimumWidth also widens the hover area.

Animate data changes

Assign a MorphTransition or a DrawTransition to transition, as for a LineCurve.

  • MorphTransition moves each bar to its new position and value. New bars grow from baselineValue, and removed bars shrink to it.
  • DrawTransition shows the new bars one after another.
  • count, barAt(), the data ranges, hover, and inspection use the new data from the start of the animation.
  • clearData() shows the new data at once.
  • While a transition is enabled, the float paths store doubles.

Feed data from C++

Pass a vector of interleaved (position, value) pairs to setData():

// Three bars: 4 at position 0, 7 at position 1, 5 at position 2.
auto data = std::vector<double>{0.0, 4.0, 1.0, 7.0, 2.0, 5.0};
bars->setData(std::move(data), 3);

setData() keeps doubles and uploads them relative to an origin near the data, so large positions such as epoch timestamps stay precise.

Ranged bars are interleaved (from, to, value) triples passed to setRangedData(), or to postRangedData() from a worker thread.

For the highest throughput, use setDataF(), or postData() from a worker thread; see the Performance guide.

Invalid bars

A bar with a NaN or infinite position, or a NaN value, is not drawn. An infinite value reaches the plot edge.

Complete source: examples/plot_types/bar_chart