VueFusionCharts

by Rohit Kumar

HTML

<script src="https://unpkg.com/vue@2.3.3"></script>
<script src="https://unpkg.com/fusioncharts/fusioncharts.js"></script>
<script src="https://unpkg.com/fusioncharts/fusioncharts.charts.js"></script>
<script src="https://rawgit.com/fusioncharts/vue-fusioncharts/feature/plugin-development/dist/vue-fusioncharts.js"></script>
<script src="https://unpkg.com/fusioncharts/themes/fusioncharts.theme.fint.js"></script>
    <div id="chart1">
        <fusioncharts
        	:type="type"
            :dataformat="dataFormat"
        	:datasource="dataSource"
        	:width="width"
        	:height="height"
            :events="events"
          
            ref="fusioncharts"
        >
        </fusioncharts>
        <p class="message-box">The value that you have selected is: {{displayValue}} </p>
    </div>

CSS

.message-box {
            text-align: center;
            margin-top: 0px;
            background-color: #F5FBFF;
            width: 500px;
            color: #006BB8;
            padding: 5px 10px;
            box-sizing: border-box;
            border: 1px solid #B8E1FF;
        }

JavaScript

Vue.use(VueFusionCharts);

        // bootstrap the demo
        var chart = new Vue({
            el: '#chart1',
            data: {
                type: 'Column2D',
                width: '500',
                height: '300',
                dataFormat: 'json',
                dataSource: {
                    chart: {
                        caption: 'Vue FusionCharts Sample',
                        theme: 'fint'
                    },
                    data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]
                },
                displayValue: 'nothing',
                events: {
                    dataplotRollover: function (ev, props) {
                        chart.displayValue = props.displayValue       
                    }       
                }
            }
        });