How can I apply custom theme in angular project

[dinesh.rajbhar]

I have created a custom theme by referring below link

https://www.fusioncharts.com/dev/themes/create-your-own-themes

for example I have theme file like this: mysampletheme.js

//The `FusionCharts.register()` API is used to register the new theme in the FusionCharts core.
FusionCharts.register('theme', {
    name: 'mySampleTheme',
    theme: {
        base: {
            chart: {
                paletteColors: '#0075c2,#1aaf5d,#f2c500',
                subCaption: 'Harry\'s SuperMart !important', //The !important directive is used to ensure that the subcaption cannot be overriden in the theme definition or in the chart data.
                captionFontSize: '14',
                subCaptionFontSize: '12',
                captionFontBold: '1',
                subCaptionFontBold: '0',
                showHoverEffect: '1',
                placeValuesInside: '0'
            },
            trendlines: [{
                color: '#FF000',
                thickness: '3',
                dashed: '1',
                dashLen: '4',
                dashGap: '2'
            }]
        },
        column2d: {
            dataset: {
                data: function(dataObj) {
                    return {
                        color: (Number(dataObj.value) < 0 ? "#3333FF" : "#CC0000")
                    }
                }
            }
        },
        bubble: {
            chart: {
                drawQuadrant: '1',
                quadrantLineColor: '3',
                quadrantLineThickness: '1',
                quadrantLineAlpha: '4',
            },
            dataset: [{
                regressionLineColor: '#123456',
                regressionLineThickness: '3',
                regressionLineAlpha: '70'
            }]
        },
        pie2d: {
            chart: {
                showPercentInToolTip: '1',
                enableSmartLabels: '1'
            }
        },
        zoomline: {
            chart: {
                anchorMinRenderDistance : '20'
            }
        },
        gantt: {
            processes: [{
                headerFont: 'Arial',
                headerFontSize: '16',
                headerFontColor: '#321ABC',
                headerIsBold: '1',
                headerIsUnderline: '1',
                headerAlign: 'left',
                headerVAlign: 'bottom'
            }]
        },
        geo: {
            chart: {
                showLabels: '1',
                useSNameInLabels: '1',
                useSNameInToolTip: '0',
                entityFillHoverColor: '#9A9A9A',
                entityFillHoverAlpha: '60',
                markerFillHoverColor: '#8AE65C',
                markerFillHoverAlpha: '60',
            },
            marker: {
                connector: {
                    thickness: '4',
                    color: '#336699',
                    alpha: '60',
                    dashed: '1',
                    dashLen: '4',
                    dashGap: '2'
                }
            }
        }
    }
});

 

How can I use this theme in my angular project.

I am using this theme file added in my index.html file

<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript" src="assets/test/theme/mysampletheme.js"></script>

 

I am using fusion chart like below in one of my component

<fusioncharts *ngIf="chartObj?.chart && chartObj?.status == 200"
    [id]= chartObj?.chart?.chartConfig?.id
    [type] = chartObj?.chart?.chartConfig?.type
    [dataFormat] = chartObj?.chart?.chartConfig?.dataformat
    [dataSource] = chartObj?.chart?.chartConfig?.dataSource
    [loadMessage] = chartObj?.chart?.chartConfig?.loadMessage
    [dataEmptyMessage] = chartObj?.chart?.chartConfig?.dataEmptyMessage
>
</fusioncharts>

In dataSource inside chart have theme="mySampleTheme".

But chart is not render using theme that I have set. It render with default theme as you can see in attached image.

Can you please let me know what I'm doing wrong?

 

Thank you.

[Ayan Bhadury]

@dinesh.rajbharPlease share your license details so that we could verify them at our end.

[dinesh.rajbhar]

@Ayan Bhadury Can you please provide you email-id so that I can share license details.

[Ayan Bhadury]

@dinesh.rajbhar You can drop a mail to [email protected]

[Akash Biswas]

Hi Dinesh,

 

You can place your custom theme file within the "assets" folder and then import in your module.ts file providing the path as below with respect to this sample shared.

import "../assets/darkbeans.js"

Sample : https://codesandbox.io/s/cool-platform-ooqx4yo41y?file=/src/app/app.component.ts

Please refer to the above sample and implement accordingly.

 

Thanks,

Akash.

[dinesh.rajbhar]

Thanks @Akash Biswas It worked for me.

 

[Akash Biswas]

Welcome Dinesh.

Glad it worked