highcharts width is bigger than the width of the parent element in angular-material.

[inakrin]

In some case with of the chart is bigger than the width of the parent element. Solution with $timeout doesn't help.

Link to jsfiddle showing the issue.

https://plnkr.co/edit/S6GbzUwmERHY7XkMMZ7c?p=preview

[houssemba]

I think that you need to include the highcharts-ng.css file to fix this problem.

[inakrin]

It fixed the view on plunkr but in my project width is still slightly bigger than the parent container, trying to figure why. Anyway, could you list highcharts-ng.css among main files in bower.json, because it was ignored by bower_concat task.

[optikool]

Hi,

I am also having this issue with highcharts-ng. This only happens on some of my charts. I am including the following modules with highcharts...

"highcharts-ng": "1.0.1", "highcharts": "5.0.12", "highcharts-no-data": "https://code.highcharts.com/modules/no-data-to-display.js", "highcharts-exporting": "https://code.highcharts.com/modules/exporting.js", "highmaps-proj4": "http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js", "highmaps-map": "https://code.highcharts.com/maps/modules/map.js", "highmaps-more": "https://code.highcharts.com/highcharts-more.js", "highmaps-data": "https://code.highcharts.com/modules/data.js", "highmaps-us": "https://code.highcharts.com/mapdata/countries/us/us-all.js"

I tried updating to your latest version, which broke everything at that point. I ended up adding a width attribute to your bindings as an option and if set will call ctrl.chart.setSize(ctrl.width);. Everything worked perfectly after that.

Because I'd rather not use a hacked version of your directive in case there are updates, what are the changes you could add width and height as an attribute to be set in your directive?

Thanks

Changed code `bindings: { config: '<', changeDetection: '<', width: '<' },

ctrl.chart = new HighchartsgetChartType(mergedConfig); if(ctrl.width) { ctrl.chart.setSize(ctrl.width); }`