CodePen Embed - ZingChart-AngularJS

<body ng-app="myApp">
  <div ng-controller="MainController" id="resizable">
    <div zingchart id="chart-1" zc-json="myJson" zc-width="100%" zc-height="100%"></div>
  </div>
</body>

html,
body {
  margin: 0px;
}

#resizable {
  height: 400px;
  width: 500px;
  padding: 5px;
  border: 2px dashed #AAA;
}

var app = angular.module('myApp', ['zingchart-angularjs']);

app.controller('MainController', function($scope) {

  $scope.myJson = {
    title: {
      text: "Drag the bottom right corner to resize",
      fontSize: 16,
      fontColor: "#fff"
    },
    backgroundColor: "#2bbb9a",
    globals: {
      shadow: false,
      fontFamily: "Arial"
    },
    type: "line",
    scaleX: {
      maxItems: 8,
      lineColor: "white",
      lineWidth: "1px",
      tick: {
        lineColor: "white",
        lineWidth: "1px"
      },
      item: {
        fontColor: "white"
      },
      guide: {
        visible: false
      }
    },
    scaleY: {
      lineColor: "white",
      lineWidth: "1px",
      tick: {
        lineColor: "white",
        lineWidth: "1px"
      },
      guide: {
        lineStyle: "solid",
        lineColor: "#249178"
      },
      item: {
        fontColor: "white"
      },
    },
    tooltip: {
      visible: false
    },
    crosshairX: {
      lineColor: "#fff",
      scaleLabel: {
        backgroundColor: "#fff",
        fontColor: "#323232"
      },
      plotLabel: {
        backgroundColor: "#fff",
        fontColor: "#323232",
        text: "%v",
        borderColor: "transparent"
      }
    },
    plot: {
      lineWidth: "2px",
      lineColor: "#FFF",
      aspect: "spline",
      marker: {
        visible: false
      }
    },
    series: [{
      values: [989, 1364, 2161, 2644, 1754, 2015, 818, 77, 1260, 3912, 1671, 1836, 1901]
    }]
  }

});

//jQuery not required. Used here for demonstrative purposes.
$(function() {
  $("#resizable").resizable({
    handles: 'ne, se, sw, nw'
  });
});

This Pen is owned by ZingChart on CodePen.

See more by @zingchart on CodePen

External CSS

External JavaScript