Introduction
Highcharts line charts are used to draw line or spline charts and are represented by a series of datapoints connected with a straight line. Line charts are used to visualize data that changes frequently. This chapter explains about Highcharts Line Charts and its types.
Description
The Highcharts Line Charts are used to represent the given variable data in a line format indicating with markers. Both large and small data points can be represented using line charts.
A particular data can be highlighted by customizing the markers. And, the controls like order of rendering and thickness of a line can be controlled in line charts.
Zooming and panning are supported by Highcharts Line Charts and are useful to view a picture or large number of data points.
Conceptual
figure
Below image represents some data in line chart.
Description
Following are various types of line charts that can be represented using Highcharts.
- Basic line chart
- Ajax loaded data, clickable points
- Time series, zoomable
- With data labels
- Spline with inverted axes
- Spline with plot bands
- Time data with irregular intervals
- Logarithmic axis
Description
Basic line charts are used to represent the given data point series in a line format. Usually the line charts are used to view the data that changes over time.
Example
Below example demonstrates how to create a basic line chart using CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>Basic line chart</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'World Climate'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Asia',
data: [12, 13.4, 16.9, 21.2, 24.5, 26.8, 27.8, 27.3, 25.1, 21.6, 17.2, 13.5]
}, {
name: 'North America',
data: [-2.7, -1.6, 2.6, 7.8, 13.1, 16.8, 19, 18.3, 14.4, 9.1, 3.3, -0.7]
}, {
name: 'South America',
data: [24, 24.1, 24, 23.3, 22.4, 21.5, 21.4, 21.9, 22.4, 23.1, 23.5, 23.8]
}, {
name: ' Africa',
data: [20, 20.9, 22.1, 23, 23.7, 23.9, 23.9, 24.1, 24, 23.3, 21.7, 20.2]
},{
name: ' Australia',
data: [20, 20.9, 22.1, 23, 23.7, 23.9, 23.9, 24.1, 24, 23.3, 21.7, 20.2]
},{
name: ' Europe',
data: [-2.7, -1.6, 2.6, 7.8, 13.1, 16.8, 19, 18.3, 14.4, 9.1, 3.3, -0.7]
},{
name: ' Antarctica',
data: [-12.8, -20.4, -29.7, -33.9, -35.4, -35.4, -37, -37.3, -36.3, -30.4, -20.4, -12.9]
}]
});
});
</script>
</body>
</html>
[/c]
Description
The Ajax data can be loaded and represented in the form of a line chart by using the following script tag.
[c]<script src=”http://code.highcharts.com/modules/data.js”></script>[/c]
Add the above script tag to the header section of the html page.
Example
Below code explains creating a line chart by importing Ajax data which shows the number of daily visitors to a page.
[c]
<!DOCTYPE html>
<html>
<head>
<title>Ajax loaded data, clickable points</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
// Get the CSV and create the chart
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {
$('#container').highcharts({
data: {
csv: csv
},
title: {
text: 'Daily visitors'
},
xAxis: {
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX || e.clientX,
y: e.pageY || e.clientY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
this.y + ' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'All visits',
lineWidth: 4,
marker: {
radius: 4
}
}, {
name: 'New visitors'
}]
});
});
});
</script>
</body>
</html>
[/c]
Description
Data labels can be displayed for each data point values by setting
plotOption.dataLables to true. Example
Below example demonstrates how to create a line chart with data labels using CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>With data labels</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'World Climate'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Asia',
data: [12, 13.4, 16.9, 21.2, 24.5, 26.8, 27.8, 27.3, 25.1, 21.6, 17.2, 13.5]
}, {
name: 'North America',
data: [-2.7, -1.6, 2.6, 7.8, 13.1, 16.8, 19, 18.3, 14.4, 9.1, 3.3, -0.7]
}, {
name: 'South America',
data: [24, 24.1, 24, 23.3, 22.4, 21.5, 21.4, 21.9, 22.4, 23.1, 23.5, 23.8]
}, {
name: ' Africa',
data: [20, 20.9, 22.1, 23, 23.7, 23.9, 23.9, 24.1, 24, 23.3, 21.7, 20.2]
}]
});
});
</script>
</body>
</html>
[/c]
Description
The chart can be represented with Spline by giving the
chart.type as spline and the axes can be inverted by setting chart.inverted to true. Example
Below example demonstrates how to create a chart with spline and invert the axes using the CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>Spline with inverted axes</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
$('#container').highcharts({
chart: {
type: 'spline',
inverted: true
},
title: {
text: 'Monthly Average Temperature of Asia'
},
subtitle: {
text: 'Climate conditions'
},
xAxis: {
reversed: false,
title: {
enabled: true,
text: 'Altitude'
},
labels: {
formatter: function () {
return this.value + 'km';
}
},
maxPadding: 0.05,
showLastLabel: true
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return this.value + '°';
}
},
lineWidth: 2
},
legend: {
enabled: false
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x} km: {point.y}°C'
},
plotOptions: {
spline: {
marker: {
enable: false
}
}
},
series: [{
name: 'Temperature',
data: [12, 13.4, 16.9, 21.2, 24.5, 26.8, 27.8, 27.3, 25.1, 21.6, 17.2, 13.5]
}]
});
});
</script>
</body>
</html>
[/c]
Description
Different symbols or images, known as markers, can be shown while representing a line chart using the property
marker.symbole. Example
Below example demonstrates how to create symbols on spline using the CDN access for both the Highchars and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>Spline with symbols</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return this.value + '°';
}
}
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: [{
name: 'Asia',
marker: {
symbol: 'square'
},
data: [12, 13.4, 16.9, 21.2, 24.5, 26.8, 27.8, {
y: 27.3,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}, 25.1, 21.6, 17.2, 13.5]
}, {
name: 'North America',
marker: {
symbol: 'diamond'
},
data: [{
y: -2.7,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)'
}
}, -1.6, 2.6, 7.8, 13.1, 16.8, 19, 18.3, 14.4, 9.1, 3.3, -0.7]
}]
});
});
</script>
</body>
</html>
[/c]
Description
User can mention the plot band ranges for the given data set by using the property
yAxis.plotBands. Example
Below example demonstrates how to create a chart that displays the plot bands for given data set.
[c]
<!DOCTYPE html>
<html>
<head>
<title>Spline with plot bands</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Wind speed'
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
}
},
yAxis: {
title: {
text: 'Wind speed (m/s)'
},
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // Light air
from: 0.3,
to: 1.5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Light air',
style: {
color: '#606060'
}
}
}, { // Light breeze
from: 1.5,
to: 3.3,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'Light breeze',
style: {
color: '#606060'
}
}
}, { // Gentle breeze
from: 3.3,
to: 5.5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Gentle breeze',
style: {
color: '#606060'
}
}
}, { // Moderate breeze
from: 5.5,
to: 8,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'Moderate breeze',
style: {
color: '#606060'
}
}
}, { // Fresh breeze
from: 8,
to: 11,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Fresh breeze',
style: {
color: '#606060'
}
}
}, { // Strong breeze
from: 11,
to: 14,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'Strong breeze',
style: {
color: '#606060'
}
}
}, { // High wind
from: 14,
to: 15,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'High wind',
style: {
color: '#606060'
}
}
}]
},
tooltip: {
valueSuffix: ' m/s'
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
pointInterval: 3600000, // one hour
pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
}
},
series: [{
name: 'Hestavollane',
data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
}, {
name: 'Vik',
data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
}],
navigation: {
menuItemStyle: {
fontSize: '10px'
}
}
});
});
</script>
</body>
</html>
[/c]
Description
Huge Volumes of data can be represented using the logarithmic axis. Usually the logarithmic axis is used to show the data like Light intensity, and earthquake.
Example
Below example demonstrates the simple code for creating a Logarithmic axis chart using the CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>Highcharts</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
$('#container').highcharts({
title: {
text: 'Logarithmic axis'
},
xAxis: {
tickInterval: 1
},
yAxis: {
type: 'logarithmic',
minorTickInterval: 0.1
},
tooltip: {
headerFormat: '<b>{series.name}</b><br />',
pointFormat: 'x = {point.x}, y = {point.y}'
},
series: [{
data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
pointStart: 1
}]
});
});
</script>
</body>
</html>
[/c]
Key Points
- The line charts are used to view the data of different time intervals.
- Highcharts provide different options for a user to create an attractive and professional line charts.
- Line charts support panning, animation, exporting images and zooming.
Programming
Tips
- Give the chart type as line in the
chart.typeoption. - Add the JavaScript files to the header section of the HTML page for creating a chart.
- Ensure that all the chart options or settings are correct before running the application.
- Using CDN access for both jQuery and Highcharts is an easy way for end-user to create Highcharts.