Search the Community

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.