Grouped Vertical Bar Chart background black when transformed to canvas

I’m submitting a … (check one with “x”)

• bug report - search github for a similar issue or PR before submitting
• feature request
• support request - use StackOverflow (add the ngx-charts tag) or the gitter chat for support questions

Current behavior I’m using html2canvas to transform some ngx-charts to a canvas. Only the “Grouped Vertical Bar Chart” gets a black background then. I guess it has something to do with the .ngx-charts .grid-panel.odd rect but had no luck with trying everything in CSS that came to my mind. All other charts I use don’t show this behaviour.

Expected behavior The background (maybe grind-panel) should not become black when transformed to a canvas element.

Reproduction of the problem

Check this Stackblitz I created where you see the difference when rendering the normal & the grouped bar chart: https://vertical-bar-chart-smoh7c.stackblitz.io/ https://stackblitz.com/edit/vertical-bar-chart-smoh7c

Please tell us about your environment: macOS 10.13.4, WebStorm 2018.1.1, npm

• ngx-charts version: 8.0.2

• Angular version: 6.0.3

• Browser: [ Chrome, Safari, Firefox ]

• Language: Typescript, ES6

[sagarp2901]

This is how I solved it, by setting the fill attribute on the rect elements:

let rectElements = Array.from(document.getElementsByTagName('rect'));
  if (rectElements.length > 0) {
    rectElements.forEach(rect => {
      rect.setAttribute('fill', '#ffffff');
    });
  }

[javiermrz]

@sagarp2901 I think that is not really clean. Put this in your css and it will do the job:

.gridpanel {
  fill: #ffffff;
}

or

rect{
  fill: #ffffff;
}

I prefer the first one, as it is more specific. However, these are not valid solutions, because they will print every element of the grid in white color, instead of a white-gray-white-gray grid. Has anyone found a better solution?