Toggle navigation Highcharts
  • Join Our Team
  • About Us
    • About Us
    • Contact Us
    • News
    • Newsletter
  • Home
  • Products
    • Highcharts
    • Highcharts Stock
    • Highcharts Maps
    • Highcharts Gantt
    • Highcharts Editor
    • Highcharts Mobile
    • Wrappers & add-ons
  • Demo
    • Highcharts demos
    • Stock demos
    • Maps demos
    • Gantt demos
    • Customer showcase
  • Developer
    • General Documentation
    • API Reference
    • Changelog
    • Roadmap
    • Code Examples
  • Support
  • Blog
  • Get it
  • Join Our Team
  • About Us
    • About Us
    • Contact Us
    • News
    • Newsletter

Highcharts Configuration Preview

function getColorPattern(i) {
    var colors = Highcharts.getOptions().colors,
        patternColors = [colors[2], colors[0], colors[3], colors[1], colors[4]],
        patterns = [
            'M 0 0 L 5 5 M 4.5 -0.5 L 5.5 0.5 M -0.5 4.5 L 0.5 5.5',
            'M 0 5 L 5 0 M -0.5 0.5 L 0.5 -0.5 M 4.5 5.5 L 5.5 4.5',
            'M 1.5 0 L 1.5 5 M 4 0 L 4 5',
            'M 0 1.5 L 5 1.5 M 0 4 L 5 4',
            'M 0 1.5 L 2.5 1.5 L 2.5 0 M 2.5 5 L 2.5 3.5 L 5 3.5'
        ];

    return {
        pattern: {
            path: patterns[i],
            color: patternColors[i],
            width: 5,
            height: 5
        }
    };
}

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

    title: {
        text: 'Primary desktop/laptop screen readers'
    },

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

    tooltip: {
        valueSuffix: '%',
        borderColor: '#8ae'
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                connectorColor: '#777',
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            },
            point: {
                events: {
                    click: function () {
                        window.location.href = this.website;
                    }
                }
            },
            cursor: 'pointer',
            borderWidth: 3
        }
    },

    series: [{
        name: 'Screen reader usage',
        data: [{
            name: 'NVDA',
            y: 40.6,
            color: getColorPattern(0),
            website: 'https://www.nvaccess.org',
            accessibility: {
                description: 'This is the most used desktop screen reader'
            }
        }, {
            name: 'JAWS',
            y: 40.1,
            color: getColorPattern(1),
            website: 'https://www.freedomscientific.com/Products/Blindness/JAWS'
        }, {
            name: 'VoiceOver',
            y: 12.9,
            color: getColorPattern(2),
            website: 'http://www.apple.com/accessibility/osx/voiceover'
        }, {
            name: 'ZoomText',
            y: 2,
            color: getColorPattern(3),
            website: 'http://www.zoomtext.com/products/zoomtext-magnifierreader'
        }, {
            name: 'Other',
            y: 4.4,
            color: getColorPattern(4),
            website: 'http://www.disabled-world.com/assistivedevices/computer/screen-readers.php'
        }]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                plotOptions: {
                    series: {
                        dataLabels: {
                            format: '<b>{point.name}</b>'
                        }
                    }
                }
            }
        }]
    }
});
              

Highcharts Demos › Accessible pie chart

Default Dark Unica Sand Signika Grid Light
  • Line charts
    • Basic line
    • Ajax loaded data clickable points
    • With data labels
    • With annotations
    • Time series zoomable
    • Spline with inverted axes
    • Spline with symbols
    • Spline with plot bands
    • Time data with irregular intervals
    • Logarithmic axis
    • Line chart with 500k points
  • Area charts
    • Basic area
    • Area with negative values
    • Stacked area
    • Percentage area
    • Area with missing points
    • Inverted axes
    • Area-spline
    • Area range
    • Area range and line
    • Sparkline charts
    • Streamgraph
  • Column and bar charts
    • Basic bar
    • Stacked bar
    • Bar with negative stack
    • Basic column
    • Column comparison
    • Column with negative values
    • Stacked column
    • Stacked and grouped column
    • Stacked percentage column
    • Column with rotated labels
    • Column with drilldown
    • Fixed placement columns
    • Data defined in a HTML table
    • Column range
  • Pie charts
    • Pie chart
    • Pie with legend
    • Donut chart
    • Semi circle donut
    • Pie with drilldown
    • Pie with gradient fill
    • Pie with monochrome fill
    • Variable radius pie
  • Scatter and bubble charts
    • Scatter plot
    • Scatter plot with 1 million points
    • Bubble chart
    • 3D bubbles
    • Packed bubble chart
    • Split Packed bubble chart
  • Combinations
    • Synchronized charts
    • Column line and pie
    • Dual axes line and column
    • Multiple axes
    • Scatter with regression line
    • Meteogram
    • Advanced timeline
  • Styled mode (CSS styling)
    • Styled mode column
    • Styled mode pie
  • Accessible charts
    • Accessible line chart
    • Accessible pie chart
    • Advanced accessible chart
    • Sonification
  • Dynamic charts
    • Spline updating each second
    • Click to add a point
    • Master-detail chart
    • Update options after render
    • Responsive chart
    • Live data from dynamic CSV
  • 3D charts
    • 3D column
    • 3D column with null and 0 values
    • 3D cylinder
    • 3D funnel
    • 3D pyramid
    • 3D column with stacking and grouping
    • 3D pie
    • 3D donut
    • 3D scatter chart
    • 3D area chart
  • Gauges
    • Gauge series
    • Solid gauge
    • Activity gauge
    • Clock
    • Gauge with dual axes
    • VU meter
    • Bullet graph
  • Heat and tree maps
    • Heat map
    • Large heat map
    • Tile map honeycomb
    • Tree map with color axis
    • Tree map with levels
    • Large tree map
  • More chart types
    • Polar (radar) chart
    • Spiderweb
    • Sunburst
    • Wind rose
    • Radial bar chart
    • Parallel coordinates
    • Wind barb
    • Vector plot
    • Box plot
    • Error bar
    • Waterfall
    • Variwide
    • Histogram
    • Bell curve
    • Funnel chart
    • Pyramid chart
    • Polygon series
    • Pareto chart
    • Sankey diagram
    • Dependency wheel
    • Organization chart
    • X-range series
    • Word cloud
    • Column pyramid chart
    • Timeline
    • Parliament (item) chart
    • Network graph (force directed graph)
    • General drawing
    • Venn diagram
    • Euler diagram
    • Dumbbell series
    • Lollipop series
    • Flame chart
Hide Menu More...

Accessible pie chart

Pie chart demonstrating some accessibility features of Highcharts. The chart shows which screen reader is used as the primary screen reader by the respondents, with NVDA currently being the most popular one. The JAWS screen reader is following closely behind.

Edit in jsFiddle Edit in CodePen
© 2020 Highcharts. All rights reserved.

Privacy Policy

Cookie Policy

Cookie Preferences