I've been working on an Angular web application that incorporates highcharts (highcharts-ng) integration.
My approach was to set up a factory provider where I defined my chart configuration options object:
angular.module('socialDashboard')
.factory('SentimentChartFactory', function() {
var sentimentGraph = {
options: {
chart: {
type: 'area',
backgroundColor: false,
height: 450,
zoomType: 'x'
}
},
colors: ['#d1d5d8', '#954145', '#41a85f'],
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
gridLineWidth: 1
},
yAxis: {
title: {
text: 'Sentiment %'
},
gridLineWidth: 0,
labels:
{
enabled: false
}
},
series: [
{
name: 'Basic Neutral',
data: [
[Date.UTC(2014, 10, 10), 60],
[Date.UTC(2014, 10, 11), 55],
[Date.UTC(2014, 10, 12), 50],
[Date.UTC(2014, 10, 13), 60],
[Date.UTC(2014, 10, 14), 55],
[Date.UTC(2014, 10, 15), 60],
[Date.UTC(2014, 10, 16), 55],
[Date.UTC(2014, 10, 17), 50],
[Date.UTC(2014, 10, 18), 60],
[Date.UTC(2014, 10, 19), 55],
]
}
],
loading: false
};
return sentimentGraph;
});
Subsequently, I created a controller for my graphs to retrieve the options object from my factory provider:
angular.module('socialDashboard')
.controller('SentimentChartController', function ($scope, $http, SentimentChartFactory) {
// Configuration for summary page
$scope.SentimentChartSummaryConfig = SentimentChartFactory;
$scope.SentimentChartSummaryConfig.options.chart.height = 250;
// Configuration for Sentiment Page
$scope.SentimentChartConfigMain = SentimentChartFactory;
$scope.SentimentChartConfigMain.options.chart.height = 450;
});
This is where I instantiate my chart:
Summary Page:
<div ng-controller="SentimentChartController">
<highchart id="{{link + '_chart'}}" config="SentimentChartSummaryConfig"></highchart>
</div>
Sentiment Page: (Different view)
<div ng-controller="SentimentChartController">
<highchart id="{{link + '_chart'}}" config="SentimentChartConfigMain"></highchart>
</div>
The issue I'm facing is that despite assigning a different value to the config attribute, both graphs are appearing with the same height (450). What could be causing this and how can I resolve it?