muhammad umar farooq frank muhammad umar farooq frank - 1 month ago 19
AngularJS Question

Highcharts ng heatmap draw line instead of boxes

Highcharts ng heatmap draw line instead of boxes

$scope.chartConfig = {
"chart": {
"type": "heatmap"
},
"credits": {
"enabled": false
},
"size": {
"height": 1000
},
"title": {
"text": ""
},
"xAxis": {
"categories": ["23-02-2005", "24-02-2005", "27-02-2005", "28-02-2005", "01-03-2005", "02-03-2005"]
},
"yAxis": {
"categories": ["Bond2Y", "Bond3Y"],
"title": null
},

"series": [{
"name": "Trades Data",
"borderWidth": 1,
"data": [
[0, 0, 0.7642386249005615],
[0, 1, 0.5010608923969173],
[1, 0, 0.5009742082142428],
[1, 1, 0.9114076033035807]
],
"dataLabels": {
"enabled": false,
"color": "#000000"
}
}]


}

Angular Highcharts

When i place these config with JQuery Its works fi

jQuery Highcharts

Is this is the highcharts-ng issue ?

Answer

When I checked your fiddle I had observed that you have not included the heatmap.js library.

Also, You need to move your chart and colorAxis inside the options block.

Check the below working fiddle link in which you can see the square blocks identical to your jQuery example.

Working Fiddle: http://jsfiddle.net/y9wjy0kz/10/

Hope this helps!

Comments