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: https://github.com/jtblin/angular-chart.js/pull/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: https://github.com/jtblin/angular-chart.js/pull/549

Let me know if you have any more questions.

Thanks! -Jeff

On Tue, Apr 4, 2017 at 10:48 AM, jdavislinkeng [email protected] 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 https://github.com/jtblin/angular-chart.js/issues/548#issuecomment-291523785, 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 < [email protected]> 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 https://github.com/jtblin/angular-chart.js/issues/548#issuecomment-315449936, 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?