# Highcharts Plot Bands Spline 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 create a spline chart with plot bands using highcharts library with examples.

## Highcharts Spline Chart with Plot Bands Example

Following is the example of creating a spline chart with plot bands by setting the required plot band properties using highcharts library.

<html>

<title>Highcharts Spline with Plot Bands Chart</title>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>

<script src="https://code.highcharts.com/modules/series-label.js"></script>

<script src="https://code.highcharts.com/modules/exporting.js"></script>

<script src="https://code.highcharts.com/modules/export-data.js"></script>

<script type="text/javascript">

\$(function() {

Highcharts.chart('container', {

chart: {

type: 'spline',

scrollablePlotArea: {

minWidth: 600,

scrollPositionX: 1

}

},

title: {

text: 'Wind speed during two days',

align: 'left'

},

subtitle: {

text: '13th & 14th of February, 2018 at two locations in Vik i Sogn, Norway',

align: 'left'

},

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(2018, 1, 13, 0, 0, 0)

}

},

series: [{

name: 'Hestavollane',

data: [

3.7, 3.3, 3.9, 5.1, 3.5, 3.8, 4.0, 5.0, 6.1, 3.7, 3.3, 6.4,

6.9, 6.0, 6.8, 4.4, 4.0, 3.8, 5.0, 4.9, 9.2, 9.6, 9.5, 6.3, 9.5,

10.8, 14.0, 11.5, 10.0, 10.2, 10.3, 9.4, 8.9, 10.6, 10.5, 11.1, 10.4,

10.7, 11.3, 10.2, 9.6, 10.2, 11.1, 10.8, 13.0, 12.5, 12.5, 11.3, 10.1

]

}, {

name: 'Vik',

data: [

0.2, 0.1, 0.1, 0.1, 0.3, 0.2, 0.3, 0.1, 0.7, 0.3, 0.2, 0.2,

0.3, 0.1, 0.3, 0.4, 0.3, 0.2, 0.3, 0.2, 0.4, 0.0, 0.9, 0.3,

0.7, 1.1, 1.8, 1.2, 1.4, 1.2, 0.9, 0.8, 0.9, 0.2, 0.4, 1.2,

0.3, 2.3, 1.0, 0.7, 1.0, 0.8, 2.0, 1.2, 1.4, 3.7, 2.1, 2.0,

1.5

]

}],

fontSize: '10px'

}

}

});

});

</script>

<body>

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

</body>

</html>

If you observe the above example, we created a spline chart with plot bands using highcharts library with required properties.

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

This is how we can create a spline chart with plot bands using highcharts library with required spline chart properties.