Change chart type at run time

Change the chart type after it has been rendered

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='chartType' type="radio" @change="onChartTypeChange" value="Column2d" checked/>
            <label>Column 2D Chart</label>
            </div>
            <div>
            <input name='chartType' type="radio" @change="onChartTypeChange" value="Bar2d" />
            <label>Bar 2D Chart</label>
            </div>
            <div>
            <input name='chartType' type="radio" @change="onChartTypeChange" value="Pie2d" />
            <label>Pie 2D Chart</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": "Recommended Portfolio Split",
        "subCaption" : "For a net-worth of $1M",
        "showValues":"1",
        "showPercentInTooltip" : "0",
        "numberPrefix" : "$",
        "enableMultiSlicing":"1",
        "theme": "fusion"
    },
    "data": [{
        "label": "Equity",
        "value": "300000"
    }, {
        "label": "Debt",
        "value": "230000"
    }, {
        "label": "Bullion",
        "value": "180000"
    }, {
        "label": "Real-estate",
        "value": "270000"
    }, {
        "label": "Insurance",
        "value": "20000"
    }]
};

var app = new Vue({
    el: '#app',
    data: {
        width: '100%',
        height: '400',
        type: 'column2d',
        dataFormat: 'json',
        dataSource: dataSource
    },
    methods:{
        // uses the chartInstance API 'chartType' to change the chart type after render
        onChartTypeChange: function (e) {
            const chart = this.$refs.fc.chartObj,
                type = e.target.value.toLowerCase();
            chart.chartType(type);
        }
    }
});