search

fusioncharts / angular-fusioncharts

Angular Component for FusionCharts JavaScript Charting Library
https://fusioncharts.github.io/angular-fusioncharts/#/ex1
Other
55 stars 37 forks source link

fusion time series chart not working in Safari when using routing. #76

Closed surbhi-fotedar closed 4 years ago

surbhi-fotedar commented 4 years ago

Angular 8, Fuison Chart: 3.15.0-sr.1 UI is breaking Screenshot 2019-12-23 at 3 21 41 PM

surbhi-fotedar commented 4 years ago

Please find the code base for the given issue:

https://bitbucket.org/surbhifotedar/fusion-chart-demo/src/master/fusion-chart-demo/

Safari version: 12

navdeepothee commented 4 years ago

Hi Surbhi,

Thanks for getting in touch.

This is a bug and we have logged a issue for this internally.

Our engineering team will work on this issue and we will keep you posted on same.

Meanwhile please feel free to revert us back for any further assistance.

Hope this helps.

priyanjitdey94 commented 4 years ago

@surbhi-fotedar In app.module.ts, please add the following line of code FusionCharts.options['SVGDefinitionURL'] = 'absolute'; before registering the charts and themes modules to FusionCharts constructor.

ie,

FusionCharts.options['SVGDefinitionURL'] = 'absolute'; // add this line
FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);

This stackoverflow answer explains the reason behind this problem.

SVG clippath is used to clip the canvas area of the chart and prevent any overflow of plots outside the canvas. Though the stackoverflow answer is in context of gradient fill, the problem exists for SVG clippath as well.