Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
<link rel="stylesheet" href="https://material.angularjs.org/1.1.3/docs.css">
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div ng-cloak="" class="tabsdemoDynamicHeight" ng-app="MyApp">
  <md-content>
    <md-tabs md-dynamic-height="" md-border-bottom="">
      <md-tab label="one">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab One</h1>
          <p>one.</p>
        </md-content>
      </md-tab>
      <md-tab label="two">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Two</h1>
          
  <div ng-controller="myctrl">
    <div id="container" style="height: 400px"></div>
  </div>
        </md-content>
      </md-tab>

    </md-tabs>
  </md-content>
</div>

<!--
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license.
-->

JavaScript

var MyApp = angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']);



MyApp.controller('myctrl', function($scope) {
  /**
  Copyright 2016 Google Inc. All Rights Reserved. 
  Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license.
  **/
  Highcharts.chart('container', {
    chart: {
      type: 'column',
      options3d: {
        enabled: true,
        alpha: 15,
        beta: 15,
        viewDistance: 25,
        depth: 40
      }
    },

    title: {
      text: 'Total fruit consumption, grouped by gender'
    },

    xAxis: {
      categories: [1952, 1953, 1954, 1955, 1956, 1957, 1958, 1959, 1960, 1961, 1962, 1963, 1964, 1965]
    },

    yAxis: {
      allowDecimals: false,
      min: 0,
      title: {
        text: 'Number of fruits'
      }
    },

    tooltip: {
      headerFormat: '<b>{point.key}</b><br>',
      pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
    },

    plotOptions: {
      column: {
        // animation: false,
        stacking: 'normal',
        depth: 40
      }
    },

    series: [{
      "name": "April",
      "data": [1904, 1847, 1865, 1950, 1932, 1934, 1951, 1853, 1881, 1843, 1913, 1870, 1888, 0],
      "_colorIndex": 0,
      "_symbolIndex": 0
    }, {
      "name": "August",
      "data": [1973, 1878, 1981, 1940, 1984, 1894, 1921, 1998, 1912, 1946, 1883, 2005, 1947, 0],
      "_colorIndex": 1,
      "_symbolIndex": 1
    }, {
      "name": "December",
      "data": [1945, 1919, 1986, 1977, 1968, 1907, 1904, 1999, 1839, 1950, 1954, 2008, 1970, 0],
      "_colorIndex": 2,
      "_symbolIndex": 2
    }, {
      "name": "February",
      "data": [1788, 1724, 1777, 1841, 1800, 1781, 1870, 1756, 1881, 1822, 1826, 1760, 1808, 49],
      "_colorIndex": 3,
      "_symbolIndex": 3
    }, {
      "name": "January",
      "data": [0, 1942, 1981, 1943, 1952, 1929,...