Export Flexcart to Image/Pdf styling issue (React)

Export Flexcart to Image/Pdf styling issue (React)

Posted by: igelfenbeyn on 23 September 2020, 3:58 am EST

• 

  igelfenbeyn

  • Post Options:
  • Link
    Copy

  Posted 23 September 2020, 3:58 am EST - Updated 3 October 2022, 6:24 am EST

  Hello,
  
  I have a Flexchart that is styled using css file. When I export it to Image or Pdf - the styles don’t get included with chart, so it looks completely off.

  

  1024×549 40.6 KB

  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 24 September 2020, 12:12 am EST

  Hi Igor,

  Can you let us know how are you exporting the chart? Are you using the saveImageToFile method for exporting the chart or are you using the wijmo.pdf module? Also, what kind of formatting have you applied on the chart? Can you provide a sample which replicates your issue?

  Regards,
  
  Ashwin

• 

  igelfenbeyn

  • Post Options:
  • Link
    Copy

  Posted 24 September 2020, 12:29 am EST

  Hello Ashwin,

  here is the snippet of the css call:

   <wjChart.FlexChart
                  className="wj-flexchart-ratingbreakdown"
  ....
  

  css:

  
  .wj-flexchart-ratingbreakdown {
      height: 250px;
      width: 100%;
      max-height: 250px;
      min-width: 250px;
  
  }
  
  
  .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;
  }
  
  
  

  I attach the right-click menu:

  
  function initChart(chart: any) {        
          menu = new FlexChartContextMenu(chart, chart.itemsSource, props.investments);
      }
  
  

  the flex-chart-context-menu component is attached. Thank you.

  flex-chart-context-menu.zip

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 27 September 2020, 4:27 pm EST

  Hi,

  We are working on this and will provide you an update soon.

  Regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 27 September 2020, 8:16 pm EST

  Hi Igor,

  We are sorry for the delayed response.

  We tried to replicate your issue but we were unable to do. Please refer to the sample link below that we used to replicate your issue:

  https://stackblitz.com/edit/react-32px2g

  Can you please modify the above sample so that it replicates your issue? Can you also let us know which version of wijmo are you using along with the browser?

  ~regards

• 

  igelfenbeyn

  • Post Options:
  • Link
    Copy

  Posted 14 October 2020, 4:42 am EST

  Hello Ashwin,
  
  I was able to replicate the issue in your sample https://stackblitz.com/edit/react-spfp2r by adding the main css class:

  
  .wj-flexchart-ratingbreakdown {
    height: 250px;
    width: 100%;
    max-height: 250px;
    min-width: 250px;
  
  }
  
  

  i’ve saved the changes, so you can see it now. Please advise on the solution. Thank you very much.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 14 October 2020, 8:56 pm EST

  Hi Igor,

  I was able to replicate the issue with the sample. I have forwarded this issue to the dev team for further investigation with internal tracking id 467142. I will update you once I will hear from them.

  ~regards