CanvasPattern object loses type information in chart-dataset-override directive.

[jgoakley]

Chart.JS was recently updated to support CanvasPattern objects as the background color to allow for using patterns as well as colors for their chart data.

I tried to pass in a CanvasPattern as the backgroundColor using the chart-dataset-override directive. When angular-chart.js uses angular.merge, the CanvasPattern object loses it's type information. As a result, when Chart.JS performs an instanceof CanvasPattern it does not match object's type and results in a Unable to parse color from object {} error and the patterns are not shown.

I'm not sure if this will be an acceptable fix, but using angular.extend instead of angular.merge seemed to carry over the type information. I know that merge performs a deep copy and extend does not so I'm not sure what the implications will be.

Here is a link to a fiddle: https://jsfiddle.net/jgoakley/peqcgudy/23/

Pull Request: #549

[jdavislinkeng]

I'm seeing nothing but gray on your fiddle. Did you ever get a resolution for this?

[jgoakley]

Yes, they grey in the fiddle is reproducing the error. I also created a pull request with the fix that I implemented and linked it in the issue. Here is the link as well: #549 Let me know if you have any more questions. Thanks! -Jeff

…

On Tue, Apr 4, 2017 at 10:48 AM, jdavislinkeng ***@***.***> wrote: I'm seeing nothing but gray on your fiddle. Did you ever get a resolution for this? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#548 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJRSSTRd1kN8YeKSwM9hcc8mhnRxoWuOks5rslhQgaJpZM4Ku5f8> .

[jdavislinkeng]

Thank you! I hope that your merge gets accepted, this resolved a few hours of frustration.

• Jon

[ChrisKatsaras]

I see that this solution works on whole data sets. Is there any way to associate a pattern with a specific piece of data (e.g a slice of a pie chart)? @jgoakley

[jgoakley]

To get a color (or pattern) to apply to a specific piece of the data, you need to pass in an array to the backgroundColor object. https://jsfiddle.net/m6gfcy66/1/ (Pattern stuff not working in this fiddle, but if you apply the fix in the pull request above you should see the patterns) Also notice that I had to make $scope.data a nested array. ($scope.data = [[5, 15, 25, 35]]) Not sure why, I'm guessing it has something to do with the way angular chart works. Let me know if you have any more questions. Thanks!

…

On Fri, Jul 14, 2017 at 3:42 PM, Christopher Katsaras < ***@***.***> wrote: I see that this solution works on whole data sets. Is there any way to associate a pattern with a specific piece of data (e.g a slice of a pie chart)? @jgoakley <https://github.com/jgoakley> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#548 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJRSSVtMG91v89k2QvgouTULbyBKgxrZks5sN8TBgaJpZM4Ku5f8> .

[ChrisKatsaras]

@jgoakley Thanks so much! Saved me a lot of time! Sorry for the late reply.
@jtblin Any reason the pull request has not been accepted yet?