Applying a different theme

Choosing from different themes available in FusionCharts Suite

by Ashok Mandal

HTML

<script src="https://unpkg.com/[email protected]/dist/vue-fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.gammel.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.candy.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.zune.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.ocean.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.carbon.js"></script>
<div id="app">
    <fusioncharts
    :type="type"
    :width="width"
    :height="height"
    :dataFormat="dataFormat"
    :dataSource="dataSource"
    ref="fc"
    ></fusioncharts>
    <div class="change-type">
        <div>
        <input name='theme' type="radio" @change="onChangeTheme" value="Fusion" checked/>
        <label>Fusion</label>
        </div>
        <div>
        <input name='theme' type="radio" @change="onChangeTheme" value="Gammel" />
        <label>Gammel</label>
        </div>
        <div>
        <input name='theme' type="radio" @change="onChangeTheme" value="Candy" />
        <label>Candy</label>
        </div>
        <div>
        <input name='theme' type="radio" @change="onChangeTheme" value="Zune" />
        <label>Zune</label>
        </div>
        <div>
        <input name='theme' type="radio" @change="onChangeTheme" value="Ocean" />
        <label>Ocean</label>
        </div>
        <div>
        <input name='theme' type="radio" @change="onChangeTheme" value="Carbon" />
        <label>Carbon</label>
        </div>
    </div>
</div>

CSS

.change-type {
  margin: auto;
  text-align:center;
  padding-top: 5px;
}

.change-type>div {
  display: inline-flex;
  position: relative;
  margin: 0 5px;
}

.change-type label {
  position: relative;
  padding: 5px 10px 5px 30px;
  border-radius: 4px;
}

.change-type input {
  opacity: 0;
  cursor: pointer;
  z-index: 1;
  width: 100%;
  height: 100%;
  left: 0;
  position: absolute;
}

.change-type label:before,
.change-type label:after {
  content: "";
  position: absolute;
}

.change-type label:before {
  display: block;
  background: #fff;
  border: 2px solid #949697;
  box-shadow: none;
  border-radius: 50%;
  top: 5px;
  left: 7px;
  width: 1rem;
  height: 1rem;
}

.change-type label:after {
  width: 0.65rem;
  height: 0.65rem;
  top: 9.5px;
  left: 12px;
  border-radius: 50%;
}

.change-type input:checked~label {
  color: #48b884;
  font-weight: 600;
  box-shadow: 0 4px 9px 0 rgba(104, 105, 128, .22);
}

.change-type input:checked~label:before {
  color: #fff;
  box-shadow: none;
  border: 2px solid #48b884;
}

.change-type input:checked~label:after {
  background: #55bd8d;
}

Vue

// register VueFusionCharts plugin
Vue.use(VueFusionCharts, FusionCharts)

var dataSource = {
    "chart": {
        "caption": "Countries With Most Oil Reserves [2017-18]",
        "subCaption": "In MMbbl = One Million barrels",
        "xAxisName": "Country",
        "yAxisName": "Reserves (MMbbl)",
        "numberSuffix": "K",
        "theme": "fusion"
    },
    "data": [{
        "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"
    }]
};

var app = new Vue({
    el: '#app',
    data: {
        width: '100%',
        height: '400',
        type: 'column2d',
        dataFormat: 'json',
        dataSource: dataSource
    },
    methods:{
        // sets the theme attribute through FusionCharts API 'setChartAttribute'
        onChangeTheme: function (e) {
            const chart = this.$refs.fc.chartObj,
                theme = e.target.value.toLowerCase();
            chart.setChartAttribute('theme', theme);
        }
    }
});