Highcharts - Spline Chart with Plot Bands


Advertisements

Following is an example of a spline chart with plot bands.

We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter. Now, let us understand an example of a spline chart with plot bands where additional configurations/steps are taken.

Configurations

Configure the bands using the yAxis.plotBands property. Set the band range using the 'from' and 'to' property. Set the color of band using the 'color' property. Style the label of band using the 'label' property.

yAxis

var yAxis = {
   title: {
      text: 'Wind speed (m/s)'
   },
   min: 0,
   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'
            }
         }
      }
   ]
};

Example

highcharts_spline_bands.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>  
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {  
            var chart = {
               type: 'spline'      
            }; 
            var title = {
               text: 'Wind speed during two days'   
            };
            var subtitle = {
               text: 'October 6th and 7th 2009 at two locations in Vik i Sogn, Norway'
            };
            var xAxis = {
               type: 'datetime',
               labels: {
                  overflow: 'justify'
               }
            };
            var yAxis = {
               title: {
                  text: 'Wind speed (m/s)'
               },
               min: 0,
               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'
                        }
                     }
                  }
               ]
            };
            var tooltip = {
               valueSuffix: ' m/s'
            };
            var plotOptions = {
               spline: {
                  lineWidth: 4,
                  states: {
                     hover: {
                        lineWidth: 5
                     }
                  },
                  marker: {
                     enabled: false
                  },
                  pointInterval: 3600000, // one hour
                  pointStart: Date.UTC(2009, 9, 6, 0, 0, 0)
               }
            };
            var series = [
               {
                  name: 'Vik i Sogn',      
                  data: [4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
                     7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
                     8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
                     7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
                     3.0, 3.0]
               }, 
               {
                  name: 'Norway',
                  data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
                     0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
                     0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
                     3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4]
               }
            ];     
            var navigation = {
               menuItemStyle: {
                  fontSize: '10px'
               }
            }   
            
            var json = {};
            json.chart = chart;
            json.title = title;
            json.subtitle = subtitle;
            json.tooltip = tooltip;
            json.xAxis = xAxis;
            json.yAxis = yAxis;  
            json.series = series;
            json.plotOptions = plotOptions;
            json.navigation = navigation;
            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

Result

Verify the result.

highcharts_line_charts.htm
Advertisements