AngularJS Live Example

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=838"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/fusioncharts.min.js"></script>
<html ng-app="HelloApp">
<body ng-controller="MyController">
<div style="background-color:#00FF00">
 <fusioncharts 
    id="mychartcontainer"
    chartid="mychart"
    width="{{width}}" 
    height="400"
    type="{{type}}"
   dataSource="{{dataSource}}"
   config="{{chartoptions}}"
   
    ></fusioncharts>
    <input type="button" ng-click="changeOpacity()" value="Change Chart's BG-Opacity"/>
    <input type="button" ng-click="changeWidth()" value="Change Width"/>
</div>
</body>
</html>

JavaScript

var app = angular.module('HelloApp', ["ng-fusioncharts"])
app.controller('MyController', function ($scope) {
    $scope.type = "column2d";
    $scope.width = 600;
    $scope.chartoptions = {
        "containerBackgroundColor": "#FF0000",
        "containerBackgroundOpacity": "0"
    };
    $scope.dataSource = {
    "chart": {
        "caption": "Monthly",
        "xaxisname": "Month",
        "yaxisname": "Revenue",
        "numberprefix": "$",
        "showvalues": "1",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Jan",
            "value": "420000"
        },
        {
            "label": "Feb",
            "value": "910000"
        },
        {
            "label": "Mar",
            "value": "720000"
        },
        {
            "label": "Apr",
            "value": "550000"
        },
        {
            "label": "May",
            "value": "810000"
        },
        {
            "label": "Jun",
            "value": "510000"
        },
        {
            "label": "Jul",
            "value": "680000"
        },
        {
            "label": "Aug",
            "value": "620000"
        },
        {
            "label": "Sep",
            "value": "610000"
        },
        {
            "label": "Oct",
            "value": "490000"
        },
        {
            "label": "Nov",
            "value": "530000"
        },
        {
            "label": "Dec",
            "value": "330000"
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "700000",
                    "istrendzone": "1",
                    "valueonright": "1",
                    "tooltext": "AYAN",
                    "endvalue": "900000",
                    "color": "009933",
                    "displayvalue": "Target",
                    "showontop": "1",
                    "thickness": "5"
                }
            ]
        }
    ],
    "styles": {
       ...