FusionCharts - Creating a custom theme (inline)

Created using FusionCharts Suite XT - www.fusioncharts.com

by Nabajeet Sonowal

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<!-- FusionCharts Suite XT ships with 3 default themes - zune, ocean and carbon. You can easily extend any of these themes and create a new one. Shown in this fiddle is an example of the same. The only difference is here we've created a theme inline in JavaSript code, which you can move to another JavaScript file, name as fusioncharts.themes.fire.js and then include in any page where you create a chart, gauge or map. Pointers on how to extend a theme: - Use the FusionCharts register method to register a theme with the name 'fire' (or your theme name). - Maintain/add different hierarchies are defined in a theme file. (i.e base.chart attributes could be over written by specific chart level attribute.) - Add conditional JavaScript logic if required. E.g., all colors can be dinimically generated at client side. - Save it as a javascript file Attribute: # theme: fire Method FusionCharts.register(); -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var value = 1;
    //Creating a new inline theme.
    //You can move this entire code block to a separate file, and load.
    if (value < 0) {
        FusionCharts.register('theme', {
            name: 'fire',
            theme: {
                base: {
                    chart: {
                        paletteColors: '#FF4444'
                    }
                },
                mscolumn2d: {
                    chart: {
                        valueFontColor: '#FFFFFF', //overwrite base value
                        valueBgColor: '#000000',
                        valueBgAlpha: '30',
                        placeValuesInside: '1',
                        rotateValues: '0'
                    }
                }
            }
        });
    } else {
        FusionCharts.register('theme', {
            name: 'fire',
            theme: {
                base: {
                    chart: {
                        paletteColors: '#444444'
                    }
                },
                mscolumn2d: {
                    chart: {
                        valueFontColor: '#FFFFFF', //overwrite base value
                        valueBgColor: '#000000',
                        valueBgAlpha: '30',
                        placeValuesInside: '1',
                        rotateValues: '0'
                    }
                }
            }
        });
    }

    var revenueChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Monthly Revenue",
                    "subCaption": "Last year",
                    "xAxisName": "Month",
                    "yAxisName": "Amount (In USD)",
                    "numberPrefix": "$",
                     "theme": "fire"
            },

                "data": [{
                "label": "Jan",
        ...