Highcharts Demo

author(s): Torstein Hønsi

by Rajeswaritest

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/modules/pattern-fill.js"></script>
<input type="text" tabindex="0"/>
<div id="container"></div>
<input type="text" tabindex="0"/>

CSS

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

caption {
	padding-bottom: 5px;
	font-family: 'Verdana';
	font-size: 14pt;
	font-weight: bold;
	color:#555555;
}

table {
	font-family: 'Verdana';
	font-size: 12pt;
	color:#555555;              
	border-collapse: collapse;
	border: 3px solid #CCCCCC;
	margin: 2px auto;	
}

tr {
  	border-bottom: 2px solid #EEEEEE;
}

th {
	border-left: 2px solid #EEEEEE;
	border-right: 2px solid #EEEEEE;
	padding: 12px 15px;
	border-collapse: collapse;
}

th[scope="col"] {
	background-color: #ffffee;
}

th[scope="row"] {
	background-color: #f0fcff;
	text-align:left;
}

td {
  	border-left: 2px solid #EEEEEE;
  	border-right: 2px solid #EEEEEE;
  	padding: 12px 15px;
  	border-collapse: collapse;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'pie',
        description: 'Most commonly used desktop screen readers in July 2015 as reported in the Webaim Survey. Shown as percentage of respondents. JAWS is by far the most used screen reader, with 30% of respondents using it. ZoomText and Window-Eyes follow, each with around 20% usage.'
    },

    title: {
        text: 'Desktop screen readers'
    },

    subtitle: {
        text: 'Click on point to visit official website'
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                connectorColor: Highcharts.getOptions().colors[0],
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            },
            point: {
                events: {
                    click: function () {
                        window.location.href = this.website;
                    }
                }
            },
            cursor: 'pointer'
        }
    },

    series: [{
        name: 'Percentage usage',
        borderColor: Highcharts.getOptions().colors[0],
        data: [{
            name: 'JAWS',
            y: 30.2,
            website: 'https://www.freedomscientific.com/Products/Blindness/JAWS',
            color: 'url(#highcharts-default-pattern-0)',
            description: 'This is the most used desktop screen reader'
        }, {
            name: 'ZoomText',
            y: 22.2,
            website: 'http://www.zoomtext.com/products/zoomtext-magnifierreader',
            color: 'url(#highcharts-default-pattern-1)'
        }, {
            name: 'Window-Eyes',
            y: 20.7,
            website: 'http://www.gwmicro.com/window-eyes',
            color: 'url(#highcharts-default-pattern-2)'
        }, {
            name: 'NVDA',
            y: 14.6,
            website: 'https://www.nvaccess.org',
            color: 'url(#highcharts-default-pattern-4)'
        }, {
            name: 'VoiceOver',
            y: 7.6,
   ...