{"id":18071,"date":"2019-05-31T15:25:02","date_gmt":"2019-05-31T13:25:02","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=18071"},"modified":"2026-01-12T11:30:57","modified_gmt":"2026-01-12T11:30:57","slug":"the-optimal-way-to-visualize-the-composition-of-any-political-or-legislative-body","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/the-optimal-way-to-visualize-the-composition-of-any-political-or-legislative-body\/","title":{"rendered":"The optimal way to visualize the composition of any political or legislative body"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>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.<\/p>\n<p>But Highcharts also provides publishers with a specialized chart type for displaying the composition of a legislative body, such as a parliament, senate or house or representatives.<\/p>\n<p>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.<\/p>\n<p>The <a href=\"https:\/\/codepen.io\/mushigh\/full\/QRVVwL\">demo below<\/a> displays the House of Commons of the United Kingdom:<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%;\" title=\"A Parliament chart displays the House of Commons of the United Kingdom \" src=\"https:\/\/codepen.io\/mushigh\/embed\/QRVVwL?height=265&amp;theme-id=light&amp;default-tab=result\" height=\"550\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/mushigh\/pen\/QRVVwL\">Circle: House of Commons of the United Kingdom <\/a> by mustapha<br \/>\n(<a href=\"https:\/\/codepen.io\/mushigh\">@mushigh<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>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.<\/p>\n<h2>Data structure<\/h2>\n<p>To structure the data just use the following format: <code>['name of the party', 'Number of seats', 'color', 'label']<\/code>.<br \/>\nHere are the data used for the demo above:<\/p>\n<pre>        ['Conservative', 313, '#0087DC', 'Conservative'],\r\n        ['Labour', 256, '#DC241f', 'Labour'],\r\n        ['Scottish National Party', 35, '#FDF38E', 'Scottish National Party'],\r\n        ['The Independent Group', 11, '#009EE0', 'The Independent Group'],\r\n        ['Liberal Democrat', 11, '#FAA61A', 'Liberal Democrat'],\r\n        ['Democratic Unionist Party', 10, '#D46A4C', 'Democratic Unionist Party'],\r\n        ['Independent', 10, '#DDDDDD', 'Independent'],\r\n        ['Sinn F\u00e9in', 7, '#326760', 'Sinn F\u00e9in'],\r\n        ['Plaid Cymru', 4, '#008142', 'Plaid Cymru'],\r\n        ['Green Party', 1, '#6AB023', 'Green Party'],\r\n        ['Speaker', 1, '#000000', 'Speaker'],\r\n        ['Vacant', 1, '#888888', 'Vacant']<\/pre>\n<p>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.<\/p>\n<h2>Shape<\/h2>\n<p>You can create and control the shape, the position, and the size of the chart using only four parameters: <a href=\"https:\/\/api.highcharts.com\/highcharts\/plotOptions.item.startAngle\">startAngle<\/a>, <a href=\"https:\/\/api.highcharts.com\/highcharts\/plotOptions.item.endAngle\">endAngle<\/a>, <a href=\"https:\/\/api.highcharts.com\/highcharts\/plotOptions.item.center\">center<\/a>, and <a href=\"https:\/\/api.highcharts.com\/highcharts\/plotOptions.item.size\">size<\/a>. Let\u2019s say, that you would like to have:<\/p>\n<ul>\n<li>An arc that goes from -90\u00b0 to +90\u00b0.<\/li>\n<li>A relatively centered position with a medium size chart.<\/li>\n<\/ul>\n<p>To get the chart\u2019s angles use <code>startAngle: -90, endAngle: 90<\/code>. 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 <code>center: ['50%', '90%'],  size: '160%';<\/code> the chart looks centered to the user, with the right size that allows the tooltip and the legend to be clearly read and a visible.<\/p>\n<p>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.<\/p>\n<p>The <a href=\"https:\/\/codepen.io\/mushigh\/full\/Pvdaep\">following demo<\/a> represents the same data of the House of Commons of the United Kingdom election in a rectangular shape instead of an arch shape:<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%;\" title=\"A rectangle Parliament chart displays the House of Commons of the United Kingdom\" src=\"https:\/\/codepen.io\/mushigh\/embed\/Pvdaep?height=265&amp;theme-id=light&amp;default-tab=result\" height=\"550\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/mushigh\/pen\/Pvdaep\">Rectangle: House of Commons of the United Kingdom<\/a> by mustapha<br \/>\n(<a href=\"https:\/\/codepen.io\/mushigh\">@mushigh<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>To get the rectangular result, I just removed the arc parameters startAngle, endAngle, center, and size.<\/p>\n<p>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 <a href=\"https:\/\/codepen.io\/mushigh\/embed\/dEqqpK\">demo<\/a>:<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%;\" title=\"A rectangle Parliament chart with symbol display the House of Commons of the United Kingdom\" src=\"https:\/\/codepen.io\/mushigh\/embed\/dEqqpK?height=265&amp;theme-id=light&amp;default-tab=result\" height=\"550\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/mushigh\/pen\/dEqqpK\">Rectangle with symbol: House of Commons of the United Kingdom<\/a> by mustapha<br \/>\n(<a href=\"https:\/\/codepen.io\/mushigh\">@mushigh<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>The individual shape is an SVG wrapped into the <a href=\"https:\/\/api.highcharts.com\/class-reference\/Highcharts.SVGRenderer\">Highcharts.SVGRenderer<\/a> method. Here is the code behind it:<\/p>\n<pre>(function(H) {\r\n  Highcharts.SVGRenderer.prototype.symbols.individual = function(x, y, w, h, r) {\r\n    return [\r\n      'M', x + w * (2 \/ 5), y + h \/ 2,\r\n      'A', w\/3, w\/3, 0, 1, 1, x + (w * 3 \/ 5), y + h \/ 2,\r\n      'L', x + (w * 4 \/ 5), y + h,\r\n      x + (w * 1 \/ 5), y + h\r\n    ];\r\n  };\r\n}(Highcharts));<\/pre>\n<p>The SVG code is also availble in this <a href=\"https:\/\/raw.githubusercontent.com\/mekhatria\/demo_highcharts\/master\/small_individual.js\">link<\/a>.<\/p>\n<p>To use the individual shape into the chart, I change the <code>symbol<\/code> option in the <code>marker<\/code> feature from the standard round symbol to the individual shape:<\/p>\n<pre>marker: {\r\n  symbol: 'individual'\r\n}<\/pre>\n<p>That is it, now the chart displays many little individuals for each party.<br \/>\nFeel free to use the organizational chart with its variants, and don\u2019t forget to be creative! \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to visualize any political or legislative assembly using Highcharts parliament interactive chart. <\/p>\n","protected":false},"author":32,"featured_media":18087,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1094],"coauthors":[699],"class_list":["post-18071","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/18071","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=18071"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/18071\/revisions"}],"predecessor-version":[{"id":29202,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/18071\/revisions\/29202"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/18087"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=18071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=18071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=18071"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=18071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}