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.

FusionCharts.ready(function () { var myChart = new FusionCharts({ type: "angulargauge", renderAt: "refgauge", width: "100%", height: "350", dataFormat: "json", "dataSource": {"chart":{"caption":"Elecon Motor Speed","subCaption":"Current Speed","lowerlimit":"0","upperlimit":"300","showvalue":"1","theme":"fusion"},"colorrange": {"color": [{ "minvalue":"0","maxvalue":"100","code":"#FFC533"},{"minvalue":"100","maxvalue":"200","code":"#62B58F"},{"minvalue":"200","maxvalue":"300","code":"#F2726F"}]}, "dials": {"dial": [{"value":"","tooltext":"Speed: <b>$datavalue</b>"}]},"trendpoints": {"point": [{ "startvalue":"125","displayvalue":"Eco","thickness":"2","color":"#E15A26","usemarker":"1","markerbordercolor":"#E15A26","markertooltext":"Eco Speed"}]}}, events: { 'beforeRender': function (evt, args) { var score = document.createElement('div'); score.setAttribute('id', 'score-detail'); args.container.parentNode.insertBefore(score, args.container.nextSibling); }, "rendered": function (evtObj, argObj) { evtObj.sender.intervalVar = setInterval(function () { var chartIns = evtObj.sender; chartIns.feedData("value=" + datavalue); }, 300); }, "realtimeUpdateComplete": function (evtObj, argObj) { var updtObj = argObj && argObj.updateObject, values = updtObj && updtObj.values, updtValStr = values && values[0], updtVal = updtValStr && parseFloat(updtValStr).toFixed(0), divToUpdate = document.getElementById("score-detail"); }, "disposed": function (evtObj, argObj) { clearInterval(evtObj.sender.intervalVar); } } }); myChart.render(); }); i am updating value from the code behind page of asp.net the updated value displays and the chart reflects the change in value but the theme is not rendered with the chart. and the problem in only in chrome browser.

I would like to be able to create a theme so that on a combination chart (ie scrollcombidy2d) different renderAs options get different settings from the theme. A simple example would be: Lines: rotateValues:0 Columns: rotateValues:1 I have tried adding the following to the theme, but it does not work: scrollcombidy2d:{chart:{showValues:"0"},dataset:[{line:{rotateValues:"0"}},{column:{rotateValues:"1"}}]}, Is this possible? What would the structure be to do this?