Doughnut

Init Vue Instance


    <body>...</body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
    <script src="js/vue-charts.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
    <script>
        Vue.use(VueCharts);
        const app = new Vue({
            el: '#app'
        });
    </script>
    

Basic Usage

Default Doughnut

<chartjs-doughnut></chartjs-doughnut>
<chartjs-doughnut></chartjs-doughnut>

Set Scales Display

<chartjs-doughnut :scalesdisplay="false"></chartjs-doughnut>
<chartjs-doughnut :scalesdisplay="myboolean"></chartjs-doughnut>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            myboolean : false,
        },
    });
 </script>

Set Hight and Width

<chartjs-doughnut :width="300" :height="500"></chartjs-doughnut>
<chartjs-doughnut :width="mywidth" :height="myheight"></chartjs-doughnut>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            mywidth : 300,
            myheight : 500,
        },

    });
 </script>

Set Labels and Data

<chartjs-doughnut :datalabel="'TestDataLabel'" :labels="['happy','myhappy','hello']" :data="[100,40,60]"></chartjs-doughnut>
<chartjs-doughnut :datalabel="mylabel" :labels="mylabels" :data="mydata"></chartjs-doughnut>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            mylabel : 'TestDataLabel',
            mylabels : ['happy','myhappy','hello'],
            mydata : [100,40,60]
        },
    });
</script>

Set Color

<chartjs-doughnut
    :backgroundcolor="['rgba(75,0,192,0.1)','rgba(0,88,88,0.1)','rgba(75,192,0,0.1)','rgba(75,192,192,0.1)']"
    :bordercolor="['rgba(75,0,192,1)','rgba(0,88,88,1)','rgba(75,192,0,1)','rgba(75,192,192,1)']"
    :hoverbordercolor="['rgba(75,0,192,1)','rgba(0,88,88,1)','rgba(75,192,0,1)','rgba(75,192,192,1)']">
</chartjs-doughnut>
<chartjs-doughnut
    :backgroundcolor="mybackgroundcolor"
    :bordercolor="mybordercolor"
    :hoverbordercolor="myhoverbordercolor">
</chartjs-doughnut>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            mybackgroundcolor : ['rgba(75,0,192,0.1)','rgba(0,88,88,0.1)','rgba(75,192,0,0.1)','rgba(75,192,192,0.1)'],
            mybordercolor : ['rgba(75,0,192,1)','rgba(0,88,88,1)','rgba(75,192,0,1)','rgba(75,192,192,1)'],
            myhoverbordercolor : ['rgba(75,0,192,1)','rgba(0,88,88,1)','rgba(75,192,0,1)','rgba(75,192,192,1)'],
        },
    });
</script>

Override

Override Datasets

<chartjs-doughnut :labels="mylabels" :datasets="mydatasets"></chartjs-doughnut>
<script>
    Vue.use(VueCharts);
const app = new Vue({
    el: '#app',
    data:{
        mylabels: ["Red", "Blue", "Yellow"],
        mydatasets:[{
            data: [300, 50, 100],
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ]
        }]
    },
});
</script>

Override Option

<chartjs-doughnut :option="myoption"></chartjs-doughnut>
<script>
    Vue.use(VueCharts);
const app = new Vue({
    el: '#app',
    data:{
        myoption:{
            responsive:true,
            maintainAspectRatio:true,
            title: {
                display: true,
                position: 'bottom',
                text: 'Custom Chart Title'
            }
        }
    }
});
</script>