While Export method is Called Showing Black Background with no Label on Chart

[Sourabh Brajesh Sharma]

Hello Team ,

While I am using Export method on Chart than it is giving no label on chart and giving black background . 

Below are some Snapshot for Reference ,

And what we want : 

z

Code That we are using is Same as Demo Code for Export Method.

exportChart(){

    this.chartComponent?.exportModule.export('PNG', 'export');

  }


Please Reply As soon as Possible .

[Durga Gopalakrishnan]

Hi Sourabh, 

  

Greetings from Syncfusion. 

  

We have ensured your reported scenario; unfortunately we are unable to replicate an issue from our end. We have attached the tested sample for your reference.  

  

Exported Image :  

  

 

  

Sample : https://stackblitz.com/edit/angular-lcxuss 

  

Since we are unaware of exact scenario in which issue is replicated, we request you to share the following information which will be more helpful for further analysis. 

• Try to reproduce the reported scenario in shared sample.
• Please share your sample (or) code snippet with full configurations.
• Share the details if you have done any other customization in your sample.
• Browser used.
• Share your nugget package version.

  

Please revert us if you have any concerns. 

  

Regards,  

Durga G

[Sourabh Brajesh Sharma]

Hello ,

I have seen your sample , So in my issue we are using background and giving variable to it . which is used for Light as well as Black theme , So when i am using the variable {background='var(--element-base-1)'} So in this situation it is exporting Chart in such way :-

When we are using css class and Passing variable in that class than Export is Working fine but when we switching to dark theme on UI there is some issue with label , which is not visible . it is due to background = 'var(--element-ui-1)' which we are not using . 

----------------------------------------------------------------------------------------

<ejs-chart #chartComponent  primaryXAxis='PrimaryXAxis'

                primaryYAxis='PrimaryYAxis' legendSettings='LegendSettings'

             [isResponsive]="true"

                [theme]='chartTheme' (loaded)='loadedChart($event)' (load)='loadChart($event)' background='var(--element-base-1)'>

Above code is giving black background to export as seen in image.

------------------------------------------------------------------------------------------

<ejs-chart class="background" #chartComponent  primaryXAxis='PrimaryXAxis'

  primaryYAxis='PrimaryYAxis' legendSettings='LegendSettings'

   [isResponsive]="true [theme]='chartTheme' (loaded)='loadedChart($event)' (load)='loadChart($event)' >

<style>

.background {  background-color : 'var(--element-base-1)' }

Above code is giving UI issue when theme changes to Dark mode , 

  

No labels for Chart .

-----------------------------------------------------------------------------------------------------------------------------------------------

So I just need to know that export method can access background value as variable is passed in it . and is there is any solution for this one .
Need Urgent Reply On this Scenario.

[Durga Gopalakrishnan]

Hi Sourabh, 

  

We have analyzed your queries. We have noted that, you are using background color for both light and dark themes. By default, when light or dark theme is specified for chart, then axis labels, data labels, legend text font colors will be changed automatically. It is an actual behavior.  

  

Please mention whether you are using dark background color for light theme, so that font colors will be in dark color, so it is not visible dark background. We suggest you to change the font color all charts elements based on background color used. 

  

Kindly revert us if you have any concerns. 

  

Regards,  

Durga G