Export Flexcart to Image/Pdf styling issue (React)

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

  • Posted 23 September 2020, 3:58 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.
  • Replied 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
  • Replied 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

  • Replied 27 September 2020, 4:27 pm EST

    Hi,

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

    Regards
  • Replied 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
  • Replied 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.
  • Replied 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels