Highcharts Basic Line Chart

In the previous chapters, we learned how to setup highcharts library and how to create a chart with required configurations using highcharts library in our webpage. Now, we will learn how to use highcharts library to create a basic line chart with examples.

Highcharts Basic Line Chart Example

Following is the example of creating the basic line chart using highcharts library.

 

<html>

<head>

    <title>Highcharts Basic Line 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 src="https://code.highcharts.com/modules/exporting.js"></script>

    <script type="text/javascript">

    $(function() {

    Highcharts.chart('container', {

        title: {

            text: 'Solar Employment Growth by Sector'

        },

        subtitle: {

            text: 'Source: thesolarfoundation.com'

        },

        yAxis: {

            title: {

                text: 'Number of Employees'

            }

        },

        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, 18111]

        }]

      });

    });

    </script>

</head>

<body>

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

    </div>

</body>

</html>

If you observe the above example, we create a simple line chart by using highcharts library with required properties.

 

When we execute the above highcharts example, we will get the result like as shown below.

 

Highcharts Basic Line Chart Example Result

 

This is how we can create a basic line chart with required properties using highcharts library.

Topics Covered