vaadin-chart (v6.1.0-beta1) exports are completely black images.

[SPrinss]

When I enable the exporting on vaadin-chart and click one of the options (svg, png, pdf, jpeg), I get a completely black image.

I'm using Polymer ^2.0.0 and vaadin-charts #6.1.0-beta1.

It doesn't matter if I include vaadin-chart-default-theme or not.

Example file:

<dom-module id="my-app"> 
    <template> 
    <style>
      :host {
        display: block;
        height: 100vh;
      }
    </style>

    <vaadin-chart additional-options="[[_addOptions]]"> 
      <vaadin-chart-series values="[1,2,3,4,5,6]"></vaadin-chart-series> 
       <vaadin-chart-series values="[2,3,4,5,6,7]"></vaadin-chart-series> 
    </vaadin-chart> 

   </template> 
    <script>
    class MyApp extends Polymer.Element {
      static get is() { return 'my-app'; }
      static get properties() {
        return {
          _addOptions: {
               type: Object,
               value: () => {
                 return { exporting: {enabled: true} }
               }
          }
        };
      }
    }

    window.customElements.define(MyApp.is, MyApp);
  </script> </dom-module>

If I click the print chart option, I do get to see the chart correctly. However, when I press cancel in the dialog box, the image does become turn completely black briefly (before returning me to my page).

[alvarezguille]

Thanks for reporting this, I did a quick test and it looks like when printing all the body children are hidden and the chart container is moved to the body, meaning the theme that is scoped for the vaadin-chart component is not applied.

The only quick workaround I found is to add the theme styles to your body as well, it seemed to work in a simple demo project, I added a link to ../../highcharts/css/highcharts.css to my index and the exporting worked.

We will do some further research in next sprint.

[DabhiGhanshyam]

Hello Guille,

I am facing the same issue while exporting the vaadin-flow chart(6.0.0), I have set the setExporting(true) property of the chart configuration.

Where do I put ../../highcharts/css/highcharts.css in vaadin-flow chart(6.0.0) project?

Please help.

[alvarezguille]

Hi @DabhiGhanshyam the issue was fixed in vaadin-charts 6.1.0, can you test with that version? If it doesn't work please create an issue for vaadin-charts-flow

[DabhiGhanshyam]

Hello Guille,

Thanks for your quick response.

I have updated vaadin-charts-flow to version 6.1.0 by upgrading project from vaadin-10 to vaadin-11.

Vaadin chart export black image issue is resolved.

But I am facing new issue while opening my application for mobile view or minimizing the browser.

Error: TypeError: Cannot read property 'textOverflow' of undefined

While my application opened successfully in Mac OS High Sierra version 10.13.5 with Safari version 11.1.1 configuration.

Please Help.