{"action":"closed","issue":{"url":"https://api.github.com/repos/chartjs/Chart.js/issues/5896","repository_url":"https://api.github.com/repos/chartjs/Chart.js","labels_url":"https://api.github.com/repos/chartjs/Chart.js/issues/5896/labels{/name}","comments_url":"https://api.github.com/repos/chartjs/Chart.js/issues/5896/comments","events_url":"https://api.github.com/repos/chartjs/Chart.js/issues/5896/events","html_url":"https://github.com/chartjs/Chart.js/issues/5896","id":388273278,"node_id":"MDU6SXNzdWUzODgyNzMyNzg=","number":5896,"title":"[BUG] With Chrome, semi-transparent background colors display unexpectedly when the chart width is low","user":{"login":"slauriere","id":1022195,"node_id":"MDQ6VXNlcjEwMjIxOTU=","avatar_url":"https://avatars0.githubusercontent.com/u/1022195?v=4","gravatar_id":"","url":"https://api.github.com/users/slauriere","html_url":"https://github.com/slauriere","followers_url":"https://api.github.com/users/slauriere/followers","following_url":"https://api.github.com/users/slauriere/following{/other_user}","gists_url":"https://api.github.com/users/slauriere/gists{/gist_id}","starred_url":"https://api.github.com/users/slauriere/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/slauriere/subscriptions","organizations_url":"https://api.github.com/users/slauriere/orgs","repos_url":"https://api.github.com/users/slauriere/repos","events_url":"https://api.github.com/users/slauriere/events{/privacy}","received_events_url":"https://api.github.com/users/slauriere/received_events","type":"User","site_admin":false},"labels":[{"id":32309888,"node_id":"MDU6TGFiZWwzMjMwOTg4OA==","url":"https://api.github.com/repos/chartjs/Chart.js/labels/type:%20support","name":"type: support","color":"aaddff","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-12-06T15:47:15Z","updated_at":"2018-12-18T15:50:53Z","closed_at":"2018-12-18T15:50:53Z","author_association":"NONE","body":"When creating a chart with background colors containing a transparency coefficient, the colors change depending on the chart width when using Google Chrome 70.0.3538.77 (no problem with Firefox).\r\n\r\n## Expected Behavior\r\n\r\nThe colors should remain the same whatever the width of the chart.\r\n\r\n## Current Behavior\r\n\r\nThe colors change when the chart width become low, typically when it's lesser than 350px. When the area containing the chart has a width greater than 500px, the first data set bars are pink, as specified in the options. However when the width get lower than 350px the bars become blue, which is unexpected.\r\n\r\n## Steps to Reproduce (for bugs)\r\n\r\nLive example: https://jsfiddle.net/nj309qpt/8/\r\n\r\n1. Create chart with the following options which specify a transparency coefficient for the backgroundColor of each data set:\r\n\r\n```\r\nvar options = {\r\n  type: \"horizontalBar\",\r\n  data: {\r\n  \"labels\": [\r\n    \"Bug\",\r\n    \"Improvement\",\r\n    \"New Feature\"\r\n  ],\r\n  \"datasets\": [{\r\n    \"label\": \"CKEditor\",\r\n    \"data\": [23, 17, 5],\r\n    \"backgroundColor\": \"rgba(255,22,232,0.8)\"\r\n  }, {\r\n    \"label\": \"Diagram\",\r\n    \"data\": [34, 11, 6],\r\n    \"backgroundColor\": \"rgba(0,24,244,0.8)\"\r\n  }]\r\n  }\r\n}\r\n\r\n  var ctx = document.getElementById('chart-container').getContext('2d');\r\n  new Chart(ctx, options);\r\n```\r\nUse the following corresponding HTML:\r\n\r\n```\r\n<body>\r\n    <canvas id=\"chart-container\"></canvas>\r\n</body>\r\n```\r\n\r\n2. Resize the browser window so that the chart width gets lower than 350px. The first data set bars display with color blue.\r\n3. Resize the browser window so that the chart width gets greater than 500px. The first data set bars display become pink.\r\n\r\n## Environment\r\n\r\n* Chart.js version: 2.7.3\r\n* Browser name and version: Google Chrome Version 70.0.3538.77 (Official Build) (64-bit)\r\n* Operating System: Ubuntu 18.10\r\n* Link to project: https://nosdemarches.gouv.fr/Demarches/1289#statistics-tab\r\n"}}
{"actor":{"display_login":"slauriere"}}