jQuery Highcharts Plugin

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script type="text/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]
                ]
            }]
        });
 </script>

chevron_right


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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.