Highcharts Basic Line Chart Example

Posted On : 17 Aug 2016

Total Views : 943

Keywords : Basic line chart in highcharts with example, How to use highcharts basic line chart with example

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Highcharts Basic line Chart</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
            var chartitle= {
                text: 'Monthly Average Temperature',
                x: -20 //center
            }
            var chartsubtitle = {
                text: 'Source: WorldClimate.com',
                x: -20
            }
            var chartxaxis =  {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            }
            var chartyaxis = {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            }
            var chartooltip =  {
                valueSuffix: '°C'
            }
            var chartlegend= {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            }
            var chartseries=[{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: 'New York',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: 'Berlin',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
            $('#container').highcharts({
                title: chartitle,
                subtitle: chartsubtitle,
                xAxis:chartxaxis,
                yAxis: chartyaxis,
                tooltip: chartooltip,
                legend: chartlegend,
                series: chartseries
            });
        });
    </script>
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

Basic Line Chart

Highcharts Basic Line Chart Example

Example

Output

Topics Covered

Search Terms

Basic Line Chart

Highcharts Basic Line Chart Example

Example

Output

Share this example

Topics Covered

Search Terms