[Chartjs]-Css style not working well when resizing chart height in angular application

by

2👍

Use custom CSS to specify the dimensions:

CSS:

.panel{width:100%;height:300px;}
.panel-body{width:100%;height:270px;}
.chart-container{height:100%!important;}
canvas{width:100%;height:100%!important;}

Demo: http://plnkr.co/edit/gVRwrEKWA9HaTCWgbyIS?p=preview

When a window is resized, the canvas and the graph gets new dimension as inline style which overrides the css rules in the stylesheets. To prevent this override, use !important

0👍

Finally i have to manage to resize chart by adding one more global variable in chart.js and assigning its value from our controller where we defined our chart.
In chart.js we can assign our new height as:

 canvas.height = this.chart.height = Chart.defaults.global.defaultHeight; // newHeight;

In our controller we can change/update it as: 

 Chart.defaults.global.defaultHeight = 250;

I did not know any other way which will be better, any other suggestion will be appreciated.

Leave a comment