Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div class="wrapper">
  <div class="huj2">

    <div class="huj">
      bla bla
    </div>
    <div class="huj">
      <div id="ChartContainer2">
        
      </div>
    </div>


  </div>
</div>

CSS

#ChartContainer2 {
  /* height:100%; */
  width: 100%;
  /* position:absolute; */
}

.huj {
  height: 50%;
  position: relative;
}

.huj2 {
  height: 100%;
}

.wrapper {
  position: fixed;
  height: 100%;
  width: 100%;
}

JavaScript

/*

    Notice the height is NOT set

*/

$(function() {

  Highcharts.Chart.prototype.is3d = function() {
    return this.options.chart.options3d && this.options.chart.options3d.enabled; // #4280
  };


  $('#ChartContainer2').highcharts({

    chart: {
      type: 'bar',
      options3d: {
        enabled: true,
        alpha: 15,
        beta: 15,
        viewDistance: 0,
        depth: 70
      },
      marginTop: 50,
      marginBottom: 50
    },
    title: {
      text: 'Stacked bar chart'
    },
    xAxis: {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total fruit consumption'
      }
    },
    legend: {
      reversed: true
    },

    plotOptions: {
      series: {
        stacking: 'normal',
        pointWidth: 30 //width of the column bars irrespective of the chart size
      },
      bar: {
        depth: 50,
        height: 50,
        cursor: 'pointer',
        point: {
          events: {
            click: function() {
              var drilldown = this.drilldown;
              if (drilldown) { // drill down
                //alert(drilldown.TaskID + ' ' + drilldown.name);
                $("#PacingModal").modal('show');
              }
            }
          }
        },
        dataLabels: {
          enabled: true,
          //rotation: -90,
          inside: true,
          color: '#FFFFFF',
          //align: 'right',
          x: 40,
          y: 15,
          style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif',
            textShadow: '0 0 3px black'
          },
          formatter: function() {
            return this.y + '%';
          }
        }
      }
    },
    series: [{
      name: 'Not Complete',
      data: [{
        y: 5,
        drilldown: {
          TaskID: 343434545252,
          name: 'somename'
        }

      }, {
        y: 3,
        drilldown: {
          TaskID: 343434545252,
          name:...