Parliament (item) chart

author(s): Torstein Hønsi

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/item-series.js"></script>
<script src="https://code.highcharts.com/themes/high-contrast-dark.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

CSS

body {
    background-color: #2E2B36;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 1100px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

input[type="number"] {
    min-width: 50px;
}

JavaScript

const colors = Highcharts.getOptions().colors;
Highcharts.chart('container', {

    chart: {
        type: 'item',
        backgroundColor: 'transparent'
    },

    title: {
        text: 'American adults (CDC)'
    },
    
    subtitle: {
    	text: '26%',
        floating: true,
        y: 285,
        style: {
	        fontSize: '25px',
            color: colors[1]
        }
    },

	colors: [colors[2], colors[1], colors[2]],

    series: [{
        name: 'Representatives',
        keys: ['name', 'y'],
        data: [
            ['', 590],
			{
            	name: 'People with disabilities',
                y: 260,
                borderWidth: 1,
                borderColor: '#fff'
            },
            ['', 150],
        ],
        borderWidth: 0,
        dataLabels: {
            enabled: true,
            formatter: function () {
            	if (this.point.name) {
                	return this.point.name;
                }
            }
        },

        // Circular options
        center: ['50%', '80%'],
        size: '160%',
        startAngle: -100,
        endAngle: 100
    }],
	
    legend: {
    	enabled: false
    },
    
    credits: {
    	enabled: false
    }
});