customize box plot box in boxplot chart - Javascript highcharts

Javascript examples for highcharts:Chart Box

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Box

Description

customize box plot box in boxplot chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {//from  www .  jav  a 2  s . c  om
    $('#container').highcharts({
       chart: {
           type: 'boxplot'
       },
       title: {
           text: 'Highcharts Box Plot Example'
       },
       legend: {
           enabled: false
       },
       xAxis: {
           categories: ['1', '2', '3', '4', '5'],
           title: {
               text: 'Experiment No.'
           }
       },
       series: [{
           name: 'Observations',
            pointWidth: 10,
           data: [
               [760, 801, null, 895, 965],
               [733, 853, null, 980, 1080],
               [714, 762, null, 870, 918],
               [724, 802, null, 871, 950],
               [834, 836, null, 882, 910]
           ],
           tooltip: {
               headerFormat: '<em>Experiment No {point.key}</em><br/>'
           }
       }]
   });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="height: 400px; margin: auto; min-width: 400px; max-width: 600px"></div>  
   </body>
</html>

Related Tutorials