Data Visualization Tutorial: How to Create a Parliament Chart

While reading the newspaper or watching TV, you will quickly learn that where there is politics, there is statistics. Countless polls and election results have been brought to life with pie, column, line, maps, and other common chart types offered by Highcharts.

But Highcharts also provides publishers with a specialized chart type for displaying the composition of a legislative body, such as Parliament, the Senate, or the House of Representatives.

Here is a quick tutorial on how to use the Parliament chart, also known as item chart or Arc-shaped Parliament Diagram. Like all Highcharts, it is dynamic, responsive, and interactive.

The demo below displays the House of Commons of the United Kingdom:

It is very straight forward to set up a parliament chart; all you have to do is to structure the data and to create the shape.

Data Structure

To structure the data just use the following format:

Here is the data used for the demo above:

        ['Conservative', 313, '#0087DC', 'Conservative'],
        ['Labour', 256, '#DC241f', 'Labour'],
        ['Scottish National Party', 35, '#FDF38E', 'Scottish National Party'],
        ['The Independent Group', 11, '#009EE0', 'The Independent Group'],
        ['Liberal Democrat', 11, '#FAA61A', 'Liberal Democrat'],
        ['Democratic Unionist Party', 10, '#D46A4C', 'Democratic Unionist Party'],
        ['Independent', 10, '#DDDDDD', 'Independent'],
        ['Sinn Féin', 7, '#326760', 'Sinn Féin'],
        ['Plaid Cymru', 4, '#008142', 'Plaid Cymru'],
        ['Green Party', 1, '#6AB023', 'Green Party'],
        ['Speaker', 1, '#000000', 'Speaker'],
        ['Vacant', 1, '#888888', 'Vacant']

To the extent possible, it is advisable to organize your data so that parties are ordered based on their political leanings, from left to center to right. This way, it is also easy to see whether the composition is heavily right, center or left, or a balanced mix.

Shape

You can create and control the shape, the position, and the size of the chart using only four parameters: startAngle, endAngle, center, and size. Let’s say, that you would like to have:

• An arc that goes from -90° to +90°.
• A relatively centered position with a medium size chart.

To get the chart’s angles, use

When it comes to position and size, your design skills will play a major role. In my case, after some adjustments, the best combination was:

The chart looks centered to the user, with the right size that allows the tooltip and the legend to be clearly read.

The arc shape is one way of representing data using the parliament chart. There is also a rectangular shape to visualize and compare the data with multiple series.

The following demo represents the same data of the House of Commons of the United Kingdom election in a rectangular shape instead of an arch shape:

To get the rectangular result, I just removed the arc parameters startAngle, endAngle, center, and size.

Another interesting organizational chart to create is by using a different shape than the circle. For example, an individual icon shape, as displayed in this demo:

The individual shape is an SVG wrapped into the Highcharts.SVGRenderer method. Here is the code behind it:

(function(H) {
  Highcharts.SVGRenderer.prototype.symbols.individual = function(x, y, w, h, r) {
    return [
      'M', x + w * (2 / 5), y + h / 2,
      'A', w/3, w/3, 0, 1, 1, x + (w * 3 / 5), y + h / 2,
      'L', x + (w * 4 / 5), y + h,
      x + (w * 1 / 5), y + h
    ];
  };
}(Highcharts));

The SVG code is also availble at this link.

To use the individual shape into the chart, I change the symbol option in the marker feature from the standard round symbol to the individual shape:

marker: {
  symbol: 'individual'
}

That is it, now the chart displays many little individuals for each party.

Feel free to use the organizational chart with its variants, and don’t forget to be creative!