{"action":"closed","issue":{"url":"https://api.github.com/repos/jtblin/angular-chart.js/issues/314","repository_url":"https://api.github.com/repos/jtblin/angular-chart.js","labels_url":"https://api.github.com/repos/jtblin/angular-chart.js/issues/314/labels{/name}","comments_url":"https://api.github.com/repos/jtblin/angular-chart.js/issues/314/comments","events_url":"https://api.github.com/repos/jtblin/angular-chart.js/issues/314/events","html_url":"https://github.com/jtblin/angular-chart.js/issues/314","id":136050883,"number":314,"title":"Bar chart colours do not work","user":{"login":"danwellman","id":373222,"avatar_url":"https://avatars.githubusercontent.com/u/373222?v=3","gravatar_id":"","url":"https://api.github.com/users/danwellman","html_url":"https://github.com/danwellman","followers_url":"https://api.github.com/users/danwellman/followers","following_url":"https://api.github.com/users/danwellman/following{/other_user}","gists_url":"https://api.github.com/users/danwellman/gists{/gist_id}","starred_url":"https://api.github.com/users/danwellman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/danwellman/subscriptions","organizations_url":"https://api.github.com/users/danwellman/orgs","repos_url":"https://api.github.com/users/danwellman/repos","events_url":"https://api.github.com/users/danwellman/events{/privacy}","received_events_url":"https://api.github.com/users/danwellman/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-02-24T12:45:15Z","updated_at":"2016-02-24T12:48:26Z","closed_at":"2016-02-24T12:48:26Z","body":"When using a pie chart, I can set global colours like this:\r\n\r\n`Chart.defaults.global.colours = ['#FF69B4', '#BADA55', '#C0FFEE', '#101CA7', '#E22025'];`\r\n\r\nThis works great, the pie segments take these colours. With a bar chart however, only the first colour is used for all bars, and also the bars have some crazy alpha setting making them semi-transparent which on white background just makes them look washed out. Here is the bar config in my controller:\r\n\r\n    $scope.bar = {\r\n        data: [100, 200],\r\n        labels: ['Something', 'Something else'],\r\n        opts: {\r\n            barShowStroke: false,\r\n        }\r\n    };\r\n\r\nHere is the mark-up:\r\n\r\n    <canvas id=\"bar\" class=\"chart chart-bar\" width=\"250\" height=\"255\"\r\n                  data-chart-options=\"bar.opts\"\r\n                  data-chart-data=\"bar.data\"\r\n                  data-chart-labels=\"bar.labels\">\r\n    </canvas>\r\n\r\nI've also tried configuring the colours for the bar chart by adding a colours property to the 'bar' object in the scope:\r\n\r\n    $scope.bar = {\r\n        colours: ['#FF69B4', '#BADA55', '#C0FFEE', '#101CA7', '#E22025']\r\n        data: [100, 200],\r\n        labels: ['Something', 'Something else'],\r\n        opts: {\r\n            barShowStroke: false,\r\n        }\r\n    };\r\n\r\nAnd adding the colours attribute to the mark-up:\r\n\r\n    <canvas id=\"bar\" class=\"chart chart-bar\" width=\"250\" height=\"255\"\r\n                  data-chart-colours=\"bar.colours\"\r\n                  data-chart-options=\"bar.opts\"\r\n                  data-chart-data=\"bar.data\"\r\n                  data-chart-labels=\"bar.labels\">\r\n    </canvas>\r\n\r\nThis doesn't work at all, it just uses the Chart.js default colours (not even the overridden defaults I set!). After looking at the chart,js site, I changed the colours property on my scope object to this:\r\n\r\n     colours: [{  fillColor: #FF69B4 }, { fillColor: '#BADA55' }],\r\n\r\nIn this format, only the first colour is used for all bars in the chart.\r\n\r\nPerhaps it's not a bug, but from  the docs on angular-chart or Chart.js it's not obvious how to specify a different colour for each bar in the chart.\r\n\r\nPlease advise"}}