title: how to bind & show standard deviation, min, max and average on bar chart in highcharts
body: <p>I have a trellis chart and I want to show the Standard Deviation, min max and average on top of them. I have the values for standard deviation, min, max and average coming into my dataset.
  Need to show SD(standard deviation) as a different color of the bar on the respective bar.
  min with down arrow, max with up arrow and average with any symbol.
  currently my chart looks like as below<br>
  <a href="https://i.stack.imgur.com/k7xUr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k7xUr.jpg" alt="enter image description here"></a></p>
  
  <p>and I want to show the SD, min max and average value on top of my current chart as like here     </p>
  
  <p><a href="https://i.stack.imgur.com/WBPAZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WBPAZ.jpg" alt="enter image description here"></a></p>
  
  <p>The complete code is as below.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;title&gt;Network Visualization&lt;/title&gt;        
          &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;style type="text/css"&gt;
  ${demo.css}
          &lt;/style&gt;
          &lt;script type="text/javascript"&gt;          
  
  
              $(function () {                
                  servicesName = [];
                  servicesName.push('Activity Store', 'Bec', 'bl2-dpx-a-Azure', 'DPX-s1-am3a', 'DPX-s1-bl2/DPX');
  
  
                  var seriesDataSet = [
                     {
                         name: 'AvgSRTT',
                         data: [674167, 221349, 40049, 635006, 43978],
                         stack: 2544
                     }, {
                         name: 'MaxCount',
                         data: [1410, 12, 284, 497, 1499],
                         stack: 3553
                     }, {
                         name: 'maxDataBytesIn',
                         data: [104034610, 97935, 2781481799, 114003343, 24964398065],
                         stack: 6556889
                     }, {
                         name: 'maxDataBytesOut',
                         data: [61710601, 78619, 262050684, 8902916, 2331402781],
                         stack: 3557879
                     }, {
                         name: 'avgAvgSRTT',
                         data: [674167, 221349, 40049, 635006, 43978],
                         stack: 68699
                     }, {
                         name: 'avgDataBytesIn',
                         data: [104034610, 97935, 2781481799, 114003343, 24964398065],
                         stack: 477889094
                     }, {
                         name: 'avgDataBytesOut',
                         data: [61710601, 78619, 262050684, 8902916, 2331402781],
                         stack: 36547568
                     }
                  ];
  
  
                  var charts = [],
                  $containers = $('#trellis td'),
                  datasets = seriesDataSet;
  
              $.each(datasets, function (i, dataset) {
                  var yAxisMax = 25000000000;
  
                  if (i == 0 || i == 4) {
                      yAxisMax = 1000000;
                  }
                  else if (i == 1) {
                      yAxisMax = 4000;
                  }
  
                  charts.push(new Highcharts.Chart({
  
                      chart: {
                          renderTo: $containers[i],
                          type: 'bar',
                          marginLeft: i === 0 ? 110 : 10 
                      },
  
                      title: {
                          text: dataset.name,
                          align: 'left',
                          x: i === 0 ? 90 : 0
                      },
  
                      credits: {
                          enabled: false
                      },
                      plotOptions: {
                          bar: {
                              dataLabels: {
                                  enabled: true
                              },
                              stacking: 'normal'
                          },
                          series: {
                              minPointLength: 3
                          }
                      },
                      xAxis: {
                          categories: servicesName,
                          labels: {
                              enabled: i === 0,                           
                          },
                          title: {
                              text: null,
                              align: 'left'
                          },
                      },
  
                      yAxis: {
                          allowDecimals: false,
                          title: {
                              text: null
                          },
                          min: 0,
                          max: yAxisMax
                      },
  
  
                      legend: {
                          enabled: false
                      },
  
                      series: [dataset],
                      minPointLength: 3
  
                  }));
              });
  
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  &lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/highcharts-more.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
          &lt;h1&gt; Network traffic details for each services&lt;/h1&gt;
          &lt;span id="date_time"&gt;&lt;/span&gt;
              &lt;table id="trellis"&gt;
                  &lt;tr&gt;
                      &lt;td style="min-width: 300px; height: 450px; margin: 0 auto"&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>