fusioncharts / fusioncharts-dist

FusionCharts JavaScript Charting library. Over 95+ charts and 1,400+ maps to choose from, with integrations available for all popular JavaScript frameworks & back-end programming languages.
https://www.fusioncharts.com
Other
84 stars 46 forks source link

FusionTime theme issues #29

Open albertlinga opened 2 years ago

albertlinga commented 2 years ago

Hi, I'm trying to evaluate Fusion Charts to be used on our product. One of the requirements is to be able to customize the theme especially the fonts used in the charts. Base on the documentation I can create my own theme and register it using FusionCharts.register('theme', {name:'mytheme', theme: {...}}).

Now I wanted to use the built-themes such as Fusion and Candy to represent Light / Dark mode. I wanted to combine those with my own theme and override only specific attributes such as the fonts by setting multiple themes such as: theme: 'candy, mytheme'. As per documentation for conflicting properties the right most will be the preference.

I have attached my custom theme here. mytheme.txt

My issue is with FusionTime. I understand that theming with FusionTime is a bit different with FusionCharts as it injects the style property defined in the theme. So when I combine two themes the style objects are overwritten entirely and not just the properties that conflicted on my custom theme. So styles like background colors fall back to the default theme values NOT the values from candy theme, since I didn't specify the background colors from my custom theme.

The alternate way of doing this is to copy the entire candy theme and paste it on mytheme then just change the specific attributes such as font. It's a bit counter intuitive since combining themes are a feature already. It just that FusionTime doesn't behave with FusionCharts not just on applying the styles / themes but also when combining multiple themes.

AyanBhadury commented 2 years ago

@albertlinga You can pass one value to the theme object for example theme:'mytheme'

The solution would be to define the stylings and attributes in the mytheme which you want to use the same like candy theme and override the properties as per the requirements.