Fusion theme is not working

[ewang24]

I am trying to get an example to work in my application. The theme does not work. There is no error message or anything, it just does not apply. I have tried a few themes and none of them work at all. Any advice?

More info: it is an older app that has a lot of other JS libraries that it uses. I just finished fixing an error where prototype.js broke something in fusion charts so the charts wouldn't render at all. Are there any known libraries that would somehow break the themes that I should look for?

 <%-- Step 1 - Include the fusioncharts core library --%>
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/3.18.0/fusioncharts.js"></script>
    <!-- Include fusion theme -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/3.18.0/themes/fusioncharts.theme.fusion.js"></script>

<script type="text/javascript">
    //STEP 2 - Chart Data
    var chartData = [{
        "label": "Venezuela",
        "value": "290"
    }, {
        "label": "Saudi",
        "value": "260"
    }, {
        "label": "Canada",
        "value": "180"
    }, {
        "label": "Iran",
        "value": "140"
    }, {
        "label": "Russia",
        "value": "115"
    }, {
        "label": "UAE",
        "value": "100"
    }, {
        "label": "US",
        "value": "30"
    }, {
        "label": "China",
        "value": "30"
    }];

    //STEP 3 - Chart Configurations
    var chartConfig = {
        type: 'column2d',
        renderAt: 'chart-container',
        width: '100%',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            // Chart Configuration
            "chart": {
                "caption": "Countries With Most Oil Reserves [2017-18]",
                "subCaption": "In MMbbl = One Million barrels",
                "xAxisName": "Country",
                "yAxisName": "Reserves (MMbbl)",
                "numberSuffix": "K",
                "theme": "fusion",
            },
            // Chart Data
            "data": chartData
        }
    };
    FusionCharts.ready(function(){
        var fusioncharts = new FusionCharts(chartConfig);
        fusioncharts.render();
    });

</script>
<div id="chart-container">FusionCharts XT will load here!</div>

Edited September 23, 2021 by ewang24

[ewang24]

Edit:

It appears that the problem is something in prototype. If I remove prototype, then the theme will render. Unfortunately, that is not a good solution. I am not able to remove the library. Does anyone have an idea of what could be happening?

[Ayan Bhadury]

@ewang24which version of prototype js you are using?