{"action":"created","issue":{"url":"https://api.github.com/repos/jtblin/angular-chart.js/issues/614","repository_url":"https://api.github.com/repos/jtblin/angular-chart.js","labels_url":"https://api.github.com/repos/jtblin/angular-chart.js/issues/614/labels{/name}","comments_url":"https://api.github.com/repos/jtblin/angular-chart.js/issues/614/comments","events_url":"https://api.github.com/repos/jtblin/angular-chart.js/issues/614/events","html_url":"https://github.com/jtblin/angular-chart.js/issues/614","id":214450155,"number":614,"title":"[BUG] Responsive chart does not resize when container gets smaller","user":{"login":"JewelsJLF","id":16506602,"avatar_url":"https://avatars1.githubusercontent.com/u/16506602?v=4","gravatar_id":"","url":"https://api.github.com/users/JewelsJLF","html_url":"https://github.com/JewelsJLF","followers_url":"https://api.github.com/users/JewelsJLF/followers","following_url":"https://api.github.com/users/JewelsJLF/following{/other_user}","gists_url":"https://api.github.com/users/JewelsJLF/gists{/gist_id}","starred_url":"https://api.github.com/users/JewelsJLF/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/JewelsJLF/subscriptions","organizations_url":"https://api.github.com/users/JewelsJLF/orgs","repos_url":"https://api.github.com/users/JewelsJLF/repos","events_url":"https://api.github.com/users/JewelsJLF/events{/privacy}","received_events_url":"https://api.github.com/users/JewelsJLF/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-03-15T16:35:14Z","updated_at":"2018-05-08T22:05:41Z","closed_at":null,"author_association":"NONE","body":"I am not sure if this is an issue with Chart.js or angular-chart so I posted this in both projects...\r\n\r\n### Expected Behavior\r\nWhen responsive is set to true, chart should resize whether container size increases or decreases.\r\n\r\n### Current Behavior\r\nWhen responsive is set to true, chart only resizes when container size increases and does not resize when it decreases.\r\n\r\n### Context\r\nI'm using angular-chart with Chart.js and bootstrap:\r\n```html\r\n<div class=\"container-fluid\">\r\n    <div class=\"row\">\r\n        <div class=\"col-xs-12\">\r\n            <div class=\"form-group\">\r\n                <canvas id=\"base\" class=\"chart-bar\"\r\n                  chart-data=\"ctrl.chart.data\"\r\n                  chart-labels=\"ctrl.chart.labels\"\r\n                  chart-colors=\"ctrl.chart.colors\"\r\n                  chart-dataset-override=\"ctrl.chart.datasetOverride\"\r\n                  chart-options=\"ctrl.chart.options\">\r\n                </canvas>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n```\r\n\r\n### Environment\r\n<!--- Include as many relevant details about the environment you experienced the bug in -->\r\n* Angular-chart version: 1.1.1\r\n* Chart.js version: 2.5.0\r\n* Browser name/version: Firefox ESR 45.8.0 / Internet Explorer 11.0.9600.18499 / Chrome 56.0.2924.87\r\n"},"comment":{"url":"https://api.github.com/repos/jtblin/angular-chart.js/issues/comments/387557344","html_url":"https://github.com/jtblin/angular-chart.js/issues/614#issuecomment-387557344","issue_url":"https://api.github.com/repos/jtblin/angular-chart.js/issues/614","id":387557344,"user":{"login":"mkwieci2","id":8204123,"avatar_url":"https://avatars2.githubusercontent.com/u/8204123?v=4","gravatar_id":"","url":"https://api.github.com/users/mkwieci2","html_url":"https://github.com/mkwieci2","followers_url":"https://api.github.com/users/mkwieci2/followers","following_url":"https://api.github.com/users/mkwieci2/following{/other_user}","gists_url":"https://api.github.com/users/mkwieci2/gists{/gist_id}","starred_url":"https://api.github.com/users/mkwieci2/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mkwieci2/subscriptions","organizations_url":"https://api.github.com/users/mkwieci2/orgs","repos_url":"https://api.github.com/users/mkwieci2/repos","events_url":"https://api.github.com/users/mkwieci2/events{/privacy}","received_events_url":"https://api.github.com/users/mkwieci2/received_events","type":"User","site_admin":false},"created_at":"2018-05-08T22:05:41Z","updated_at":"2018-05-08T22:05:41Z","author_association":"NONE","body":"I would first try to use `$scope.$emit('$resize')` within your controller.  This should activate the angular-chart `$scope.$on('$resize')` function within the source.  You can put a break point here to see if its getting hit.\r\n\r\nIf that doesnt work then it may have to do with your flex not shrinking the canvas on page resize.  Try to set `min-width: 0` and see if that fixes your issue, if it does then you can adjust the min-width to be the appropriate size.\r\n\r\nAdding the min-width on my canvas container (which was using flex) as well as calling `$scope.$emit('$resize')` solved the problem for me."}}
{"actor":{"display_login":"mkwieci2"}}