Spline charts are similar to line charts; the only difference is that in line charts, the data points are connected by a straight line whereas in spline charts, the points are connected by curves. A line chart can easily be converted into a spline chart by changing the chart type from line to spline.
Consider the following example showing Producer Price Index (PPI) in the US from 2007 to 2012:
(function() {
$( '#chart_container' ).highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Producer Price Index (PPI) in the US'
},
subtitle: {
text: 'Source: Bureau of Labor Statistics'
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'PPI',
data: [
[Date.UTC(2007, 00, 01), 172.6],
[Date.UTC(2008, 00, 01), 189.6],
[Date.UTC(2009, 00, 01), 172.9],
[Date.UTC(2010, 00, 01), 184.7],
[Date.UTC(2011, 00, 01), 201],
[Date.UTC(2012, 00, 01), 202.2]
]
}]
});
})();This code will result in the following spline chart:
Plot bands are yet another feature of Highcharts that greatly improve the visualization of the data. They are always perpendicular to the axis in which they are defined.
Considering the previous example, we will insert two plot bands in the yAxis component of our chart:
Include the following code in the previous example for the yAxis component:
yAxis: {
plotBands: [{
from: 0,
to: 200,
color: 'rgba(82, 174, 0, 0.2)',
label: {
text: 'Low',
style: {
color: 'rgb(82, 174, 0)'
}
}
}, {
from: 200,
to: 300,
color: 'rgba(174, 0, 0, 0.2)',
label: {
text: 'High',
style: {
color: 'rgb(174, 0, 0)'
}
}
}]
}The following is the screenshot of the resulting chart: