Stacked Column w/ Datetime X-axis Columns width - Javascript highcharts

Javascript examples for highcharts:Chart Axis

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

Description

Stacked Column w/ Datetime X-axis Columns width

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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {/* w  w w .  ja v  a2  s .  c  om*/
    var chart;
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            "title": {
                "text": null
            },
                "legend": {
                "layout": "vertical",
                    "style": {},
                    "enabled": false
            },
                "xAxis": {
                    startOnTick:true,
                     endOnTick:true,
                "type": "datetime",
                    "minTickInterval": 86400000
            },
                "yAxis": {
                "stackLabels": {
                    "enabled": true
                },
                    "title": {
                    "text": null
                }
            },
                "tooltip": {
                "enabled": true
            },
                "credits": {
                "enabled": false
            },
                "plotOptions": {
                "column": {
                    "stacking": "normal",
                    pointWidth:40
                }
            },
                "chart": {
                "defaultSeriesType": "column",
                    "height": 200,
                    "borderRadius": 0,
                    "renderTo": "monthy_chart"
            },
                "subtitle": {},
                "colors": ["#c7084b", "#089fbf", "#00d047", "#d300d1", "#f48400", "#f6f400"],
                "series": [{
                "name": "Camera",
                    "data": [
                    [1362614400000, 6],
                    [1362528000000, 2]
                ]
            }, {
                "name": "NewCamera2",
                    "data": [
                    [1362614400000, 1]
                ]
            }]
        });
    });
});

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

Related Tutorials