Css issue when exporting FlexChart to png

Css issue when exporting FlexChart to png

Posted by: igelfenbeyn on 13 October 2020, 8:22 am EST

• 

  igelfenbeyn

  • Post Options:
  • Link
    Copy

  Posted 13 October 2020, 8:22 am EST - Updated 3 October 2022, 6:25 am EST

  I have an issue exporting a flexchart to an image. It looks fine on the page, but the style is completely off when exporting.

  this is the css:

  .wj-flexchart-ratingbreakdown.wj-flexchart .wj-header .wj-title {
      font-size: 8pt;
      font-weight: lighter;
  }
  
  .wj-flexchart-ratingbreakdown.wj-flexchart .wj-data-labels .wj-data-label {
      font-size: 100%;
      font-style: normal;
      opacity: .75;
      font-size: 150%;
      font-weight: bold;
  }
  

  Here is the control declaration:

  <FlexChart
                 id="theChart"
                 ref={chart}
                 className="wj-flexchart-ratingbreakdown"
                 //header="Top Ten Exposure by Country"
                 bindingX="Country"
                 selectionMode="Point"
                 itemsSource={getData(props.investments)}
                 palette={palette}
                
             >
  

  Image 1 is what the chart looks like on the page, Image 2 is the exported image.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 13 October 2020, 5:33 pm EST

  Hi Igor,

  I think you created a similar post a while back:

  https://www.grapecity.com/forums/wijmo/export-flexcart-to-imagepd

  I already tested your provided code at my end but I was unable to replicate the issue. Refer to the sample below which I used for testing:

  https://stackblitz.com/edit/react-tkg6mo

  Can you please let me know whether I am missing something in order to replicate your issue? You can also modify the above sample so that it reproduces your issue.

  Regards,
  
  Ashwin