Customizing Legends

Note: This is part of the Charts with QML Gallery example.

Here we show 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.

Screenshot displaying the government taxes as multiple area charts stacked on top of each other, the orange chart being the social security, green being the municipal, and the blue being the state

 AnimatedAreaSeries {
     id: municipalSeries
     name: "municipal"
     axisX: axisX
     axisY: axisY
     borderWidth: 0
     upperSeries: LineSeries {
         id: municipalUpper
         XYPoint { x: 2006; y: 33119 + 13443 }
         XYPoint { x: 2007; y: 37941 + 15311 }
         XYPoint { x: 2008; y: 40122 + 16552 }
         XYPoint { x: 2009; y: 38991 + 17904 }
         XYPoint { x: 2010; y: 34055 + 17599 }
         XYPoint { x: 2011; y: 34555 + 19002 }
         XYPoint { x: 2012; y: 38991 + 19177 }
     }
     lowerSeries: stateUpper
 }

Hovering with mouse on top of the legend will highlight the hovered series. (see CustomLegend.qml).

Screenshot showing if the mouse hovers above one of the three legends (state, municipal, social security), the associated area will be highlighted

 Row {
     id: legendRow
     anchors.centerIn: parent
     spacing: 10

     Repeater {
         id: legendRepeater
         model: legend.seriesCount
         delegate: legendDelegate
     }
 }
 Component {
     id: legendDelegate
     Rectangle {
         id: rect
     ...
         MouseArea {
             id: mouseArea
             anchors.fill: parent
             hoverEnabled: true
             onEntered: {
                 rect.gradient = buttonGradientHovered;
                 legend.entered(label.text);
             }
             onExited: {
                 rect.gradient = buttonGradient;
                 legend.exited(label.text);
                 marker.opacity = 0.3;
                 marker.height = 10;
             }
             onClicked: {
                 legend.selected(label.text);
                 marker.opacity = 1.0;
                 marker.height = 12;
             }
         }

You can also select one of the stacked areas for a closer look as a line series by a mouse click (see ChartViewHighlighted.qml).

Screenshot showing if one area chart of the three is being pressed, the course of the area will be shown

 ChartView {
     id: chartViewHighlighted

     property variant selectedSeries

     signal clicked

     legend.visible: false
     margins.top: 10
     margins.bottom: 0
     antialiasing: true

     LineSeries {
         id: lineSeries

         axisX: ValueAxis {
             min: 2006
             max: 2012
             labelFormat: "%.0f"
             tickCount: 7
         }
         axisY: ValueAxis {
             id: axisY
             titleText: "EUR"
             min: 0
             max: 40000
             labelFormat: "%.0f"
             tickCount: 5
         }
     }