search

fusioncharts / react-fusioncharts-component

ReactJS component for FusionCharts JavaScript Charting library.
https://fusioncharts.github.io/react-fusioncharts-component/
MIT License
93 stars 33 forks source link

Pie chart labels and legends are not getting displayed properly - UI is getting disturbed - Intermittent issue. #46

Closed mayura-gslab closed 3 years ago

mayura-gslab commented 5 years ago

On load, Sometimes it does not display the labels until user clicks on the pie chart or legends. Sometimes, Even though labels gets displayed, UI gets disturbed(labels and legends' text). This is mostly happening on chrome and not Firefox.

It will be helpful if anyone can suggest any change or solution.

rohanoid5 commented 5 years ago

@mayura-gslab can you share a scaled down version of your dataSource so I can further investigate your issue?

mayura-gslab commented 5 years ago

@rohanoid5, Here are the chart-props of Fusion Charts We are using - chart = { "showBorder": "0", "showLegend": "1", "showpercentvalues": "1", "bgcolor": "FFFFFF", "legendBorderColor": "FFFFFF", "use3DLighting": "0", "theme": "fusion", "paletteColors": "#5D62B5, #5FC3BE, #E9716E, #F2C52F", "canvasPadding": "0", "usedataplotcolorforlabels": "1", "canvasLeftMargin": "0", "canvasRightMargin": "0", "drawCustomLegendIcon": "1", "legendIconBorderThickness": "0", "legendIconSides": "0", "legendBorderColor": "FFFFFF", "legendIconBorderThickness": "0", "legendIconBorderColor": "#FFFFFF", "chartRightMargin": "0", "chartLeftMargin": "0" };

And passing data in the required format. Configuration is as follows: width: '100%', height: '300', type: 'pie2d', dataFormat: "json", dataSource: chartProps

siawo commented 4 years ago

@mayura-gslab can yous please share your scaled-down version of your implementation where the issue can be replicated?

AyanBhadury commented 3 years ago

@mayura-gslab We tried to replicate the said issue at our end but we were unable to. The chart seems to be working fine at our end with your given data. Here is the link to the demo: https://codesandbox.io/s/overlapped-demo-react-forked-2pdcp?file=/src/App.js Kindly try at your end and if you still face any issue, fork the demo and send us so that we investigate it further.