Ngx-charts: Grouped Vertical Bar Chart background black when transformed to canvas

[hnitzsche]

I'm submitting a ... (check one with "x")

• [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

[hnitzsche]

It has nothing to do with ngx-charts. html2canvas just can't handle the g attribute that is used to wrap some ngx-charts elements. Renaming the attribute for testing also removes the wrong black background.

[joaovictortinoco]

@hnitzsche which g attribute is this? I'm having the same issue

[hnitzsche]

Hey @joaovictortinoco ,
I can't say which exact element it is, as I didn't proceed with this project, but I found this old code in my project - with this ugly DOM manipulation I figured out that it somehow has something to do with a deeper nested g element inside the bar-chart . Maybe it helps you to find a solution that fits your problem:

const barChartBarBackgroundGs = document.getElementsByClassName('bar-chart chart')[0].childNodes[0].childNodes;

for (let i = barChartBarBackgroundGs.length - 1; i >= 0; --i) {
  const oldG = barChartBarBackgroundGs[i];
  const newG = document.createElement('foreignobject');
  if (oldG.firstChild) newG.appendChild(oldG.firstChild);
  oldG.parentNode.replaceChild(newG, oldG);
}

[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?