css issue when exporting FlexChart to png

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

  • Posted 13 October 2020, 8:22 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.
  • Replied 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
Need extra support?

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

Learn More

Forum Channels