Highcharts JavaScript Tutorial

What is Highcharts

Highcharts is a comprehensive charting solution. It has a wide range of charts, high-levels of interactivity, and great ease-of-use. The biggest downside of Highchart is that it can be expensive to license for commercial offerings.

What is Javascript?

Javascript is the base language by which people build charts and websites for the web. There are many additional frameworks that are built on top of Javascript. Learning Javascript is an absolute must for modern web development, particularly when it comes to using a charting library.

Highcharts Javascript Code Example

Below is complete example usage of using Highcharts to create a line chart of Solar Employment growth!

 <head>

   <title>Highcharts Example</title>

   <script src="https://code.highcharts.com/highcharts.js"></script>

 </head>

 <body>

   <h2>Highcharts JavaScript Code Example</h2>

   <p>This example demonstrates how to create a simple line chart using Highcharts.</p>

   <div id="container" style="width:100%; height:400px;"></div>

   <script>

     document.addEventListener('DOMContentLoaded', function () {

       Highcharts.chart('container', {

         title: {

           text: 'Solar Employment Growth by Sector, 2010-2016'

         },

         subtitle: {

           text: 'Source: thesolarfoundation.com'

         },

         yAxis: {

           title: {

             text: 'Number of Employees'

           }

         },

         xAxis: {

           accessibility: {

             rangeDescription: 'Range: 2010 to 2016'

           }

         },

         legend: {

           layout: 'vertical',

           align: 'right',

           verticalAlign: 'middle'

         },

         plotOptions: {

           series: {

             label: {

               connectorAllowed: false

             },

             pointStart: 2010

           }

         },

         series: [{

           name: 'Installation',

           data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]

         }, {

           name: 'Manufacturing',

           data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]

         }, {

           name: 'Sales & Distribution',

           data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]

         }, {

           name: 'Project Development',

           data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]

         }, {

           name: 'Other',

           data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 17300]

         }],

         responsive: {

           rules: [{

             condition: {

               maxWidth: 500

             },

             chartOptions: {

               legend: {

                 layout: 'horizontal',

                 align: 'center',

                 verticalAlign: 'bottom'

               }

             }

           }]

         }

       });

     });

   </script>

 </body>

ABOUT EXPLO

Explo, the publishers of Graphs & Trends, is an embedded analytics company. With Explo’s Dashboard and Report Builder product, you can a premium analytics experience for your users with minimal engineering bandwidth.
Learn more about Explo →