Spline with Plot Bands Chart Tutorial

Today, We want to share with you Spline with Plot Bands Chart Tutorial.In this post we will show you Spline chart with plot bands using highcharts, hear for How to add plot bands in spline chart using highcharts we will give you demo and example for implement.In this post, we will learn about highcharts add plot line dynamically, with an example.

Spline with Plot Bands Chart Tutorial

There are the Following The simple About highcharts xaxis datetime interval Full Information With Example and source code.

As I will cover this Post with live Working example to develop highcharts line chart example code, so the highcharts plotbands opacity is used for this example is following below.

Highcharts Spline with Plot Bands Chart Example

index.html

Angular is a platform for building mobile & desktop web Based user friendly and light weight applications.Angular,It’s TypeScript-based open-source Angularjs web application framework.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Highcharts Spline with plot bands chart - www.pakainfo.com</title>
    <script src="https://www.pakainfo.com/jquery/js/jquery-1.12.4.js"></script>
    <script src="https://www.pakainfo.com/jquery/js/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
            var graphtype = {
                type: 'spline'
            }
            var graphTitle = {
                text: 'Wind speed during two days'
            }
            var graphchildtitle = {
                text: 'May 31 and and June 1, 2045 at two locations in Vik i Sogn, Pipaliya'
            }
            var graphxaxis = {
                type: 'datetime',
                labels: {
                    overflow: 'justify'
                }
            }
            var graphyaxis = {
                title: {
                    text: 'Wind speed (m/s)'
                },
                minorGridLineWidth: 0,
                gridLineWidth: 0,
                alternateGridColor: null,
                plotBands: [{ // Light air
                    from: 0.3,
                    to: 1.5,
                    color: 'rgba(68, 171, 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, 171, 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, 171, 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, 171, 213, 0.1)',
                    label: {
                        text: 'High wind',
                        style: {
                            color: '#606060'
                        }
                    }
                }]
            }
            var graphtooltip = {
                valueSuffix: ' m/s'
            }
            var graphplotoptions = {
                spline: {
                    lineWidth: 4,
                    states: {
                        hover: {
                            lineWidth: 5
                        }
                    },
                    marker: {
                        enabled: false
                    },
                    pointInterval: 3698989, // one hour
                    pointStart: Date.UTC(2045, 4, 31, 0, 0, 0)
                }
            }
            var graphseries = [{
                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]
            }]
            var chartnavigation = {
                menuItemStyle: {
                    fontSize: '10px'
                }
            }
                $('#chart-full-content').highcharts({
                    chart:graphtype,
                    title: graphTitle,
                    subtitle: graphchildtitle,
                    xAxis: graphxaxis,
                    yAxis: graphyaxis,
                    tooltip:graphtooltip,
                    plotOptions: graphplotoptions,
                    series: graphseries,
                    navigation: chartnavigation
                });
        });
    </script>
</head>
<body>
    <div id="chart-full-content" style="min-width: 335px; height: 425px; margin: 0 auto"></div>
</body>
</html>

Web Programming Tutorials Example with Demo

Read :

Also Read This 👉   Time Series Zoomable Chart Tutorial With Examples

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about highcharts line chart example code.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.