Creating Your First Pie Chart Using HighCharts

HighCharts is a powerful and robust JavaScript library for creating data visualization on your website. In this article we will learn to create a basic and simple pie chart. HighCharts is free for personal use and can be downloaded here.

The Set Up
Once you’ve download HighCharts, you can add a JavaScript reference to it locally. Or you can add a reference to the hosted script like below. You will need to reference jQuery as well.

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

 

The HTML

On your web page, add a div where you want your chart to go. Here we name it pieChartContainer, and we set the height and width to 500 pixels each.

<div id="pieChartContainer" style="height: 500px; width: 500px;"></div>

 

The JavaScript
Here we will use jQuery to initialize the chart.

$(function () {
    $('#pieChartContainer').highcharts({
        title: {
            text: 'Screen Resolution Percentage'
        },
        series: [{
            type: 'pie',
            data: [
                ['1366×768', 20.24],
                ['1920×1080', 7.85],
                ['1024×768', 6.37],
                ['1280×800', 5.60],
                ['768×1024', 5.29],
                ['1280×1024', 5.12],
                ['360×640', 4.78],
                ['1600×900', 4.69],
                ['1440×900', 4.39],
                ['320×568', 4.06]
            ]
        }]
    });
});

Keep in mind this is a basic chart. HightCharts charts are fully customizatable with options. For more details, you can visit the HighCharts documentation page.

 

The Live Demo

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *