Highcharts Basic Chart

In the previous chapter, we learned how to add higcharts library in our webpage. Now we learn how to create a simple bar chart using highcharts library with examples.

 

Now create a webpage like as shown below by including highcharts and jQuery library references with simple div to bind the chart.

 

<html>

<head>

    <title>Highcharts Bar Chart</title>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

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

</head>

<body>

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

</body>

</html>

If you observe the above code, we created a div tag with id, width and height properties. The div tag is useful to bind the chart details which are created by highcharts library.

 

Generally, the highcharts will use JavaScript object structure to define the options or settings of chart like as shown below.

 

<script type="text/javascript">

    $(function() {

    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>

If you observe the above code, we defined different properties like chart, title, xAxis, yAxis, and series to plot the chart based on our requirements.

 

Following table lists the different type of chart properties available in highcharts library to draw the charts.

 

PropertyDescription
chart It is useful to define the type of chart.
title It is the text that will be presented at the top of a chart.
subtitle It is useful to define the subtitle for chart.
xAxis It is useful to configure the values to be displayed on the X-Axis.
yAxis It is useful to configure the values to be displayed on the Y-Axis.
tooltip It is useful to show the tooltip that describes the values on that particular part of the chart when hovering over a series or a point on the chart.
legend It is useful show the data series in the graph and allows for enabling and disabling one or more series.
series It is useful to define the data to be displayed on the chart.

The following picture will show detailed information about the properties which we will use in charts.

 

Chart Configurations in Highcharts

Highcharts Bar Chart Example

Following is the example of creating the bar chart using highcharts library.

 

Live Preview

<html>

<head>

    <title>Highcharts Bar Chart</title>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

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

    <script type="text/javascript">

    $(function() {

    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>

</head>

<body>

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

    </div>

</body>

</html>

If you observe the above code, we mentioned the chart type as “bar”. When we execute the above highcharts example, we will get the result like as shown below. 

 

Highcharts Bar Chart Example Result

 

 This is how we can use highcharts library to create a different type of charts based on our requirements.