Highcharts Basics : Simple Bar Chart

Hello Highcharts

In this article we will write the simplest charting program using Highcharts javascript library. Include the jQuery and highcharts javascript within the head section. Define a div tag with an id container within the body of the page. We can now use Highcharts.chart method to draw the chart inside the container div. The complete code is shown below.

<!DOCTYPE html>
<html>
    <head>
        <title>Hello High Charts</title>
        <script
          src="https://code.jquery.com/jquery-3.1.1.min.js"
          integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous"></script>
          <script src="http://code.highcharts.com/highcharts.js"></script>
    </head>
    <body>

        <script>

        $(function () { 
            var myChart = Highcharts.chart('container', {
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'Fruit Consumption'
                },
                xAxis: {
                    categories: ['Apples', 'Bananas', 'Oranges']
                },
                yAxis: {
                    title: {
                        text: 'Fruit eaten'
                    }
                },
                series: [{
                    name: 'Jane',
                    data: [1, 0, 4]
                }, {
                    name: 'John',
                    data: [5, 7, 3]
                }]
            });
        });            

        </script>

    <div id="container"></div>
    </body>
</html>

Separate Data from the Method Invocation

We can refactor the code to separate the data from invoking the Highcharts.chart method.

<script>
  var options = {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Bugs',
        data: [1, 0, 4]
    }, {
        name: 'Daffy',
        data: [5, 7, 3]
    }]
  };

  $(function () { 
    var myChart = Highcharts.chart('container', options);
  });            

</script>

The options object contains the data and configuration of Highcharts. We can also specify the div id in the options object, renderTo: key-value and pass the options as the only parameter to the chart method as follows:

<script>
  var options = {
    chart: {
        renderTo: 'container',
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Rhonda',
        data: [1, 0, 4]
    }, {
        name: 'Jane',
        data: [5, 7, 3]
    }]
  };

  $(function () { 
    var myChart = Highcharts.chart(options);
  });            

</script>

Highcharts Starter Template

Here is the template that you can use as a starting point to play with Highcharts API.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script
          src="https://code.jquery.com/jquery-3.1.1.min.js"
          integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous"></script>

          <script src="http://code.highcharts.com/highcharts.js"></script>
    </head>
    <body>

    <script>
      var options = {

          };

          $(function () { 
               var chart = Highcharts.chart(options);
          });            
    </script>

        <div id="container"></div>

    </body>
</html>

Summary

In this article, we wrote a simple hello highcharts program using jQuery 3.1.1 and Highcharts 5.0.7. You can experiment with these examples. For instance, move the javascript tags before the end of the body section and see what happens. In a real project, we don't hard-code the data in the Javascript code, we will be hitting a backend API endpoint to get a JSON that will be rendered as charts. We will discuss this topic in an upcoming article.


Related Articles


Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.