Introduction
Highcharts is a JavaScript-based library that lets you to create beautiful, and high quality web-based charting with minimal coding. Users can create professional and attractive charts with different options for a web application or website using Highcharts.
This chapter explains about the most important Highcharts Options:
- Zooming
- Plot bands and plot lines
Description
Zooming in Highcharts can be done either on X or Y-axis independently. The option
chart.zoomType is set to either 'x, y or xy'.
On touch gadgets, the client can zoom by pinching in the graph region. On these gadgets, the client can move the zoomed territory by panning with one finger over the chart. Whereas for a mouse pointer, the zooming is done by dragging out a rectangle in the chart. Unlike pinch zooming, the client can't dish the zoomed zone, yet needs to zoom out in again on another range. Description
Plot lines and plot bands are entirely comparable being used. They both have the alternative of id, color, label, event and zIndex. The lines and bands will dependably be opposite to the hub characterized inside. At the point when a plot band/line is utilized on both x and y axis, the plot band/line on the y-axis will appear in front.
Following are a few examples where the Plot Bands and Plot Lines charts are represented in Highcharts Options:
- Spline with plot bands
- Removing a plot band
- Spline with dashed and dotted plot lines
- Toggle plot band
Description
Users can mention the plot band range for the given data set by using the property called
yAxis.plotBands. Example
Below example demonstrates the simple code for creating a chart that displays the plot bands for a 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
The plot bands can be removed by creating a remove button using button tag in the header section of an Html page.
Example
Below example demonstrates the simple code for creating a chart with remove plot band button in Highcharts Options.
[c]
<!DOCTYPE html>
<html>
<head>
<title>Removing plot band</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>
<button id="button" class="autocompare">Remove plot band</button>
<script language="JavaScript">
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
plotBands: [{
color: '#FCFFC5',
from: 4.5,
to: 7.5,
id: 'plotband-1'
}]
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
// button action
$('#button').click(function () {
var chart = $('#container').highcharts();
chart.xAxis[0].removePlotBand('plotband-1');
});
});
</script>
</body>
</html>
[/c]
Description
The Spline in a chart can be represented with dashed and dotted plot lines by setting the option
plotLines.dashStyle. Example
Below example demonstrates the simple code for creating an spline chart with dashed and dotted plot lines in Highcharts Options.
[c]
<!DOCTYPE html>
<html>
<head>
<title>spline dashed dotted charts</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>
<div id="report"></div>
<script language="JavaScript">
$(function () {
$('#container').highcharts({
xAxis: {
plotLines: [{ // mark the weekend
color: 'red',
width: 2,
value: Date.UTC(2010, 0, 4),
dashStyle: 'longdashdot'
}],
tickInterval: 24 * 3600 * 1000,
// one day
type: 'datetime'
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000
}]
});
});
</script>
</body>
</html>
[/c]
Description
The plot bands can be Toggle on a chart by creating a button using button tag in the header section of an Html page for removing or adding the Plot band.
Example
Below example demonstrates the simple code for creating a Toggle effect for adding or removing a plot band on a chart using CDN access for both Highcharts and jQuery.
[c]
<!DOCTYPE html>
<html>
<head>
<title>Toggle the 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>
<button id="button" class="autocompare">Add plot band</button>
<script language="JavaScript">
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
var hasPlotBand = false,
chart = $('#container').highcharts(),
$button = $('#button');
$button.click(function () {
if (!hasPlotBand) {
chart.xAxis[0].addPlotBand({
from: 5.5,
to: 7.5,
color: '#FCFFC5',
id: 'plot-band-1'
});
$button.html('Remove plot band');
} else {
chart.xAxis[0].removePlotBand('plot-band-1');
$button.html('Add plot band');
}
hasPlotBand = !hasPlotBand;
});
});
</script>
</body>
</html>
[/c]
Key Points
- The line charts are used to view the data of different time intervals.
- Plot bands and plot lines are similar to each other.
- Highcharts provide various options for users to create an attractive and professional line charts.
Programming
Tips
- Add the JavaScript files to the head section of the HTML page to create 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.