Highcharts Demo

author(s): Øystein Moseng

by koh_edwin

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/themes/avocado.js"></script>
<div id="container"></div>

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

caption {
	padding-bottom: 15px;
	font-family: 'Verdana';
	font-size: 1.2em;
	color:#555;
}

table {
	font-family: 'Verdana';
	font-size: 12pt;          
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
    text-align: center;
    width: 100%;
}

table tr:nth-child(odd) {
  background-color: #fff;
}

table tr:nth-child(even) {
  background-color: #FCF9F9;
}

th {
	font-weight: 600;
    padding: 10px;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },

    caption: {
        text: "Respondents' current level of employment. The results clearly reflect the significant unemployment and underemployment of individuals with disabilities, with only 40.7% of respondents being employed full time."
    },

      accessibility: {
          keyboardNavigation: {
              focusBorder: {
                  style: {
                      lineWidth: 3,
                      color: '#aa1111',
                      borderRadius: 5
                  },
                  margin: 4
              }
          }
      },

    title: {
        text: 'WEBAIM survey'
    },

    subtitle: {
        text: 'Level of employment'
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
        }
    },

    series: [{
        name: 'Percentage usage',
        showInLegend: true,
        depth: 40,
        data: [{
            name: 'Full time employment',
            y: 40.7
        }, {
            name: 'Part time employment',
            y: 13.9
        }, {
            name: 'Unemployed',
            y: 45.4
        }]
    }]
});