Open In App

jQuery Highcharts Plugin

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

jQuery provides a very modern and highly interactive Highcharts plugin for programmers to implement charts for representing or comparing data for web and mobile applications. It’s multi-platform and supports SVG.

You have to download the required files in the working folder so that the programmer can include in the head section of the HTML structure page as implemented in the following programs.

Download link:

https://www.highcharts.com/blog/download/

Example 1: The following example demonstrates the horizontal bar graph for different states and its population by using Highcharts plugin.

html




<!DOCTYPE HTML>
<html>
 
<head>
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>jQuery Highcharts Plugin</title>
 
    <script src="highcharts.js"></script>
    <script src="exporting.js"></script>
    <script src="export-data.js"></script>
    <script src="accessibility.js"></script>
 
    <style type="text/css">
        body {
            text-align: center;
        }
 
        .highcharts-data-table table,
        highcharts-figure {
            min-width: 310px;
            max-width: 650px;
            margin: 2em auto;
        }
 
        #containerDivID {
            height: 450px;
        }
 
        .highcharts-data-table table {
            font-family: Arial;
            border: 2px solid #e9e9e9;
            margin: 10px auto;
            text-align: center;
            max-width: 500px;
            width: 90%;
 
        }
 
        .highcharts-data-table caption {
            padding: 1em 0;
            font-size: 1.1em;
            color: #FFFF;
        }
 
        .highcharts-data-table tr:hover {
            background: #bedaff;
        }
 
        .highcharts-data-table th {
            font-weight: 600;
            padding: 0.5em;
        }
 
        .highcharts-data-table td,
        .highcharts-data-table th,
        .highcharts-data-table caption {
            padding: 0.6em;
        }
 
        .highcharts-data-table thead tr,
        .highcharts-data-table tr:nth-child(even) {
            background: #f8f8f8;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <b>jQuery Highcharts Plugin</b>
    <figure class="highcharts-figure">
        <div id="containerDivID"></div>
        <p class="highcharts-description">
            Column bar charts showing population
            data for various states in India.
        </p>
 
    </figure>
 
    <script type="text/javascript">
 
        Highcharts.chart('containerDivID', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'India Population by states'
            },
 
            xAxis: {
                categories: ['Karnataka', 'Telangana',
                    'Punjab', 'Assam', 'Orissa'],
 
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Population (lakhs)',
                    align: 'high'
                },
            },
            tooltip: {
                valueSuffix: 'lakhs'
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -50,
                y: 100,
                borderWidth: 5,
                backgroundColor: Highcharts.defaultOptions
                    .legend.backgroundColor || '#FFFFFF',
 
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Year 2000',
                data: [1107, 231, 6351, 4203, 2329]
            }, {
                name: 'Year 2005',
                data: [1233, 1526, 1947, 1408, 1261]
            }, {
                name: 'Year 2010',
                data: [1814, 8641, 3714, 4727, 2191]
            }, {
                name: 'Year 2015',
                data: [1276, 1301, 4436, 6238, 2247]
            }]
        });
    </script>
</body>
 
</html>


Output:

Example 2: The following example demonstrates the 3D pie charts representing the access of various website by a single user in a particular year by using Highcharts plugin.

html




<!DOCTYPE HTML>
<html>
 
<head>
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1">
    <title>jQuery Highcharts Plugin</title>
 
    <script src="highcharts.js"></script>
    <script src="highcharts-3d.js"></script>
    <script src="exporting.js"></script>
    <script src="export-data.js"></script>
    <script src="accessibility.js"></script>
 
    <style type="text/css">
        body {
            text-align: center;
        }
 
        #containerDivID {
            height: 500px;
        }
 
        .highcharts-figure,
        .highcharts-data-table table {
            min-width: 310px;
            max-width: 600px;
            margin: 2em auto;
        }
 
        .highcharts-data-table table {
            font-family: Arial;
            border-collapse: collapse;
            border: 2px solid #e9e9e9;
            margin: 10px auto;
            text-align: center;
            width: 90%;
            max-width: 550px;
        }
 
        .highcharts-data-table td,
        .highcharts-data-table th,
        .highcharts-data-table caption {
            padding: 0.6em;
        }
 
        .highcharts-data-table caption {
            padding: 2em 0;
            font-size: 1.3em;
            color: #FFFF;
        }
 
        .highcharts-data-table th {
            font-weight: 600;
            padding: 0.5em;
        }
 
        .highcharts-data-table tr:hover {
            background: #f8f8f8;
        }
 
        .highcharts-data-table thead tr,
        .highcharts-data-table tr:nth-child(even) {
            background: #ffffff;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <b>jQuery Highcharts Plugin</b>
 
    <figure class="highcharts-figure">
        <div id="containerDivID"></div>
        <p class="highcharts-description">
            This demonstrates the usage of 3D pie chart.
            Select or de-select any portion from the
            chart for information.
        </p>
    </figure>
 
    <script type="text/javascript">
 
        Highcharts.chart('containerDivID', {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                }
            },
            title: {
                text: 'Websites accessed in 2020'
            },
            accessibility: {
                point: {
                    valueSuffix: '%'
                }
            },
            tooltip: {
                pointFormat: '{series.name}: {point.percentage:.1f}%'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth: 30,
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}'
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Website used',
                data: [
                    ['GeeksforGeeks', 55.0],
                    ['NDTV', 27.5],
                    ['youTube', 9.5],
                    ['google', 7.2],
                    ['Others', 1.5]
                ]
            }]
        });
    </script>
</body>
 
</html>


Output:

Example 3: The above example can be similarly implemented to represent 3D donut pie charts by making simple changes to the jQuery code as follows. The output chart is shown in the below image.

javascript




Highcharts.chart('containerDivID', {
    chart: {
        type: 'pie',
        options3d: {
            enabled: true,
            alpha: 45
        }
    },
    title: {
        text: 'Information about monthly grocery'
    },
    subtitle: {
        text: '3D donut pie charts' +
            ' using highcharts plugin'
    },
    plotOptions: {
        pie: {
            innerSize: 100,
            depth: 45
        }
    },
    series: [{
        name: 'Delivered amount in kgs',
        data: [
            ['Wheat flour', 8],
            ['Brown Rice', 5],
            ['Millets', 3],
            ['Ragi flour', 7],
            ['Gram flour', 9],
            ['Oats', 3],
            ['Lentils', 4],
            ['Chickpeas', 2],
            ['Blackbeans', 6]
        ]
    }]
});


Output :

All the charts implemented by using Highcharts plugin can be extended to HighchartTable plugin. With the Highcharts library usage, there exists a way which converts the HTML table data into desired charts.

Download link for including the required files in the head section in addition to the Highchart plugin’s files.

Example 4: The following example demonstrates the very basic HighchartTable plugin usage showing column chart with monthly expenses.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>jQuery HighchartTable Plugin</title>
    <meta charset="UTF-8">
 
    <script src=
    </script>
    <script src="highcharts.js"></script>
    <script src="jquery.highchartTable.js"></script>
    <style>
        body {
            font-family: Arial;
            text-align: center;
        }
 
        #containerDivID {
            width: 550px;
            height: auto;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <b>
        jQuery HighchartTable Plugin
    </b>
    <div class="containerDivID">
        <table class="highchart"
               data-graph-container-before="1"
               data-graph-type="column">
            <thead>
                <tr>
                    <th>Month</th>
                    <th>Expenditure</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>January</td>
                    <td>18000</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>15000</td>
                </tr>
                <tr>
                    <td>March</td>
                    <td>13000</td>
                </tr>
                <tr>
                    <td>April</td>
                    <td>22000</td>
                </tr>
                <tr>
                    <td>May</td>
                    <td>12000</td>
                </tr>
                <tr>
                    <td>June</td>
                    <td>12000</td>
                </tr>
            </tbody>
        </table>
    </div>
 
    <script>
        $(document).ready(function () {
            $('table.highchart').highchartTable();
        });
 
    </script>
</body>
 
</html>


Output:

Example 5: The following example demonstrates line chart using HighchartTable plugin.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>jQuery HighchartTable Plugin</title>
    <meta charset="UTF-8" />
 
    <script src=
    </script>
    <script src="highcharts.js"></script>
    <script src="jquery.highchartTable.js"></script>
    <style>
        body {
            font-family: Arial;
            text-align: center;
        }
 
        #containerDivID {
            width: 550px;
            height: auto;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <b>jQuery HighchartTable Plugin</b>
    <div class="containerDivID">
        <table class="highchart"
               data-graph-container-before="1"
               data-graph-type="line"
               data-graph-height="310px"
            data-graph-width="500px">
            <caption>
                This shows line graph for
                monthly expense
            </caption>
            <thead>
                <tr>
                    <th>Month</th>
                    <th>Expenditure</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>January</td>
                    <td>18000</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>15000</td>
                </tr>
                <tr>
                    <td>March</td>
                    <td>13000</td>
                </tr>
                <tr>
                    <td>April</td>
                    <td>22000</td>
                </tr>
                <tr>
                    <td>May</td>
                    <td>12000</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        $(document).ready(function () {
            $("table.highchart").highchartTable();
        });
    </script>
</body>
 
</html>


Output :

Example 6: The following example demonstrates bubble chart using Highchart plugin which represents data around 3 dimensions. Bubble charts generally plots graph taking x values, y values and z (size) values. The horizontal x and vertical y are value axes and z represents its size.

html




<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8" />
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1" />
    <title>jQuery Highcharts Plugin</title>
 
    <script src="highcharts.js"></script>
    <script src="highcharts-more.js"></script>
    <script src="exporting.js"></script>
    <script src="export-data.js"></script>
    <script src="accessibility.js"></script>
 
    <style type="text/css">
        body {
            text-align: center;
        }
 
        .highcharts-figure,
        .highcharts-data-table table {
            min-width: 310px;
            max-width: 600px;
            margin: 2em auto;
        }
 
        #containerDivID {
            height: 500px;
        }
 
        .highcharts-data-table table {
            font-family: Arial;
            border-collapse: collapse;
            border: 2px solid #e9e9e9;
            margin: 10px auto;
            text-align: center;
            width: 90%;
            max-width: 550px;
        }
 
        .highcharts-data-table caption {
            padding: 2em 0;
            font-size: 1.3em;
            color: #ffff;
        }
 
        .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: #ffffff;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <b>jQuery Highcharts Plugin</b>
 
    <figure class="highcharts-figure">
        <div id="containerDivID"></div>
        <p class="highcharts-description">
            Bubble chart showing total products with their
            sales achieved and market shares in percentage.
        </p>
    </figure>
 
    <script type="text/javascript">
        Highcharts.chart("containerDivID", {
            chart: {
                type: "bubble",
                plotBorderWidth: 1,
                zoomType: "xy",
            },
 
            legend: {
                enabled: false,
            },
 
            title: {
                text: "Sales and market share of" +
                    " products in the market",
            },
 
            accessibility: {
                point: {
                    valueDescriptionFormat: "{index}. {point.name}, " +
                        "Product count: {point.x}, " +
                        "Sales: Rs.{point.y}, " +
                        "Market share: {point.z}%.",
                },
            },
            xAxis: {
                gridLineWidth: 1,
                title: {
                    text: "Total number of products sold",
                },
                labels: {
                    format: "{value} ",
                },
                plotLines: [
                    {
                        color: "black",
                        dashStyle: "dot",
                        width: 2,
                        value: 25,
                        label: {
                            rotation: 0,
                            y: 15,
                            style: {
                                fontStyle: "arial",
                            },
                            text: "Good number of products sold",
                        },
                        zIndex: 3,
                    },
                ],
                accessibility: {
                    rangeDescription: "Range: 20 to 30 numbers.",
                },
            },
 
            yAxis: {
                startOnTick: false,
                endOnTick: false,
                title: {
                    text: "Sales achieved",
                },
                labels: {
                    format: "Rs.{value} ",
                },
                maxPadding: 0.2,
                plotLines: [
                    {
                        color: "black",
                        dashStyle: "dot",
                        width: 2,
                        value: 50,
                        label: {
                            align: "right",
                            style: {
                                fontStyle: "arial",
                            },
                            text: "Good number for products sold",
                            x: -10,
                        },
                        zIndex: 3,
                    },
                ],
                accessibility: {
                    rangeDescription: "Range: 0 to 60, 000 rupees.",
                },
            },
 
            tooltip: {
                useHTML: true,
                headerFormat: "<table>",
                pointFormat:
                    '<tr><th colspan="2">{point.product}</th></tr>' +
                    "<tr><th>Products sold:</th><td>{point.x}</td></tr>" +
                    "<tr><th>Sales achieved :</th><td>Rs.{point.y}</td></tr>" +
                    "<tr><th>Market share:</th><td>{point.z}%</td></tr>",
                footerFormat: "</table>",
                followPointer: true,
            },
 
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        format: "{point.name}",
                    },
                },
            },
 
            series: [
                {
                    data: [
                        { x: 16, y: 5900, z: 3, name: "LB", product: "Ladies Bag" },
                        { x: 14, y: 22340, z: 14.7, name: "Sh", product: "Shoes" },
                        { x: 20, y: 60000, z: 15.8, name: "Mbl", product: "Mobile" },
                        { x: 18, y: 23500, z: 12, name: "Bks", product: "Books" },
                        { x: 22, y: 32200, z: 42, name: "SK", product: "Saving kit" },
                        { x: 31, y: 55000, z: 35, name: "Cp", product: "Cooking pans" },
                        { x: 17, y: 46000, z: 40, name: "MK", product: "Makeup kit" },
                        { x: 37, y: 19000, z: 10, name: "Pi", product: "Piano" },
                    ],
                },
            ],
        });
    </script>
</body>
 
</html>


Output:

Example 7: The following example demonstrates area charts using Highcharts plugin. These are similar to line charts as demonstrated earlier with the difference of visualizing data in volumes.

html




<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8" />
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1" />
    <title>Highcharts Example</title>
 
    <script src="highcharts.js"></script>
    <script src="exporting.js"></script>
    <script src="export-data.js"></script>
    <script src="accessibility.js"></script>
 
    <style type="text/css">
        body {
            text-align: center;
        }
 
        .highcharts-figure,
        .highcharts-data-table table {
            min-width: 310px;
            max-width: 600px;
            margin: 2em auto;
        }
 
        #containerDivID {
            height: 500px;
        }
 
        .highcharts-data-table table {
            font-family: Arial;
            border-collapse: collapse;
            border: 2px solid #e9e9e9;
            margin: 10px auto;
            text-align: center;
            width: 90%;
            max-width: 550px;
        }
 
        .highcharts-data-table caption {
            padding: 2em 0;
            font-size: 1.3em;
            color: #ffff;
        }
 
        .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: #ffffff;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <b>jQuery Highcharts Plugin</b>
 
    <figure class="highcharts-figure">
        <div id="containerDivID"></div>
        <p class="highcharts-description">
            It demonstrates the basic area chart
            showing men and women working strength .
        </p>
    </figure>
 
    <script type="text/javascript">
        Highcharts.chart("containerDivID", {
            chart: {
                type: "area",
            },
            accessibility: {
                description: "Image description: An area chart compares" +
                    " the working strength of the men and women" +
                    " between 1950 and 2020. The number men or " +
                    " women are plotted on the Y-axis and the " +
                    " years on the X-axis. ",
            },
            title: {
                text: "Men and Women work force",
            },
 
            xAxis: {
                allowDecimals: false,
                labels: {
                    formatter: function () {
                        return this.value;
                    },
                },
                accessibility: {
                    rangeDescription: "Years between : 1950 to 2020.",
                },
            },
            yAxis: {
                title: {
                    text: "Working strength",
                },
                labels: {
                    formatter: function () {
                        return this.value / 1000 + "k";
                    },
                },
            },
            tooltip: {
                pointFormat: "{series.name} reached {point.y:, .0f}" +
                    " in numbers in year {point.x}",
            },
            plotOptions: {
                area: {
                    pointStart: 1950,
                    marker: {
                        enabled: false,
                        symbol: "circle",
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true,
                            },
                        },
                    },
                },
            },
            series: [
                {
                    name: "men",
                    data: [
                        null,
                        null,
                        17,
                        12,
                        17,
                        13,
                        21,
                        14,
                        16,
                        19,
                        32,
                        21,
                        35,
                        25,
                        25,
                        55,
                        125,
                        155,
                        215,
                        427,
                        655,
                        852,
                        1160,
                        1617,
                        1478,
                        1321,
                        2138,
                        4221,
                        4512,
                        4502,
                        4502,
                        4500,
                        4501,
                        5502,
                        6229,
                        7189,
                        8139,
                        9199,
                        10538,
                        18517,
                        12527,
                        10475,
                        11421,
                        10358,
                        10295,
                        10104,
                        12610,
                        12401,
                        11643,
                        13092,
                        14478,
                        15915,
                        17385,
                        19055,
                        21215,
                        23210,
                        22010,
                        23044,
                        25393,
                        27935,
                        21000,
                        26000,
                        29000,
                        28010,
                        29020,
                        27010,
                        25000,
                        24000,
                        31982,
                        32040,
                        31233,
                        39197,
                        45000,
                    ],
                },
                {
                    name: "women",
                    data: [
                        null,
                        null,
                        11,
                        12,
                        22,
                        23,
                        24,
                        27,
                        28,
                        32,
                        27,
                        45,
                        67,
                        78,
                        86,
                        92,
                        112,
                        201,
                        250,
                        289,
                        369,
                        621,
                        1005,
                        1436,
                        2063,
                        3057,
                        4618,
                        5113,
                        5113,
                        4954,
                        4804,
                        4761,
                        4717,
                        4368,
                        4218,
                        6444,
                        9914,
                        9620,
                        9326,
                        9822,
                        15468,
                        18020,
                        17020,
                        16020,
                        15507,
                        14062,
                        12787,
                        13287,
                        14747,
                        13076,
                        12551,
                        12144,
                        11009,
                        10950,
                        10871,
                        11004,
                        14304,
                        23464,
                        24314,
                        23086,
                        22380,
                        21434,
                        24126,
                        27387,
                        29459,
                        31056,
                        29224,
                        27342,
                        26662,
                        26926,
                        27912,
                        28909,
                        28905,
                        27826,
                        25079,
                        25702,
                        24826,
                        24605,
                        30062,
                        32049,
                        33852,
                        35804,
                        37000,
                        35020,
                        33011,
                        31008,
                        37431,
                        43000,
                        41000,
                        39000,
                    ],
                },
            ],
        });
    </script>
</body>
 
</html>


Output:

There are many more beautiful types of charts in the plugin. Programmers can explore and implement according to the application’s requirements.



Last Updated : 13 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads