columns centered when multi series - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

columns centered when multi series

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">
    $(window).load(function(){/*from w  ww. jav a 2  s  .c  o m*/
$(function () {
      var hc_options_1 = {
         chart: {
            renderTo: 'graph_container_1',
            type: 'column'
         },
         title: {
            text: 'My Title'
         },
         xAxis: {
            type: 'datetime'
         },
         yAxis: {
            title: {
               text: 'Tag Value'
            }
         },
         plotOptions: {
            series: {
               dataLabels: {
                  align: 'center',
                  enabled: true,
               }
            }
         },
         series: [{
            data:[[1497870000000,207.207],[1497873600000,97.766],[1497877200000,320.879],[1497880800000,101.188],[1497884400000,122.674],[1497888000000,75.415]],
            name:'ST100',
            color:'#FFFF00'
         }
         ]
      };
      var hc_options_2 = {
         chart: {
            renderTo: 'graph_container_2',
            type: 'column'
         },
         title: {
            text: 'My Title'
         },
         xAxis: {
            type: 'datetime'
         },
         yAxis: {
            title: {
               text: 'Tag Value'
            }
         },
         plotOptions: {
            series: {
               dataLabels: {
                  align: 'center',
                  enabled: true,
               }
            }
         },
         series: [{
            data:[
               {x:1497870000000,y:207.207,color:'#FFFF00'},
               {x:1497873600000,y:97.766,color:'#00FF00'},
               [1497877200000,320.879],
               [1497880800000,101.188],
               {x:1497884400000,y:122.674,color:'#0000FF'},
          [1497888000000,75.415]
            ],
            name:'ST100'
      }]
      };
   var chart_1 = new Highcharts.Chart(hc_options_1);
   var chart_2 = new Highcharts.Chart(hc_options_2);
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="graph_container_1" style="width: 700px; height: 300px; border:1px solid #000;"></div>
      <br> 
      <div id="graph_container_2" style="width: 700px; height: 300px; border:1px solid #000;"></div>  
   </body>
</html>

Related Tutorials