Responsive charts

Select any of the dimensions given in the list. The chart adjusts itself to its allotted percentage

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">
    <div class="min-size">
        <div id="container" ref="container" class='dynamic-container'>
            <fusioncharts
            :type="type"
            :width="width"
            :height="height"
            :dataFormat="dataFormat"
            :dataSource="dataSource"
            :style="{ 'width': '100%', 'height': '100%' }"
            ref="fc"
            ></fusioncharts>
        </div>
    </div>
    <br />
    <div class="change-type">
        <div>
        <input name='chartSize' type="radio" @change="onChartSizeChange" value="400x250"/>
        <label>400 &#10005; 250</label>
        </div>
        <div>
        <input name='chartSize' type="radio" @change="onChartSizeChange" value="600x350" checked/>
        <label>600 &#10005; 350</label>
        </div>
        <div>
        <input name='chartSize' type="radio" @change="onChartSizeChange" value="700x400" />
        <label>700 &#10005; 400</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;
}
.dynamic-container{
  height: 350px;
  width: 600px;
}
.min-size{
  height: 400px;
  width: 700px;
}

Vue

// register VueFusionCharts plugins
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: '100%',
        type: 'column2d',
        dataFormat: 'json',
        dataSource: dataSource
    },
    methods:{
        // changes the height and width of the parent container of FusionCharts
        onChartSizeChange: function (e) {
            const container = this.$refs.container,
                size = e.target.value.split('x');
            container.style.width = size[0] + 'px';
            container.style.height = size[1] + 'px';
        }
    }
});