dinesh.rajbhar

How can I apply custom theme in angular project

Recommended Posts

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.

Screenshot 2021-07-13 at 3.20.31 PM.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now