Pie

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 Pie

<chartjs-pie></chartjs-pie>
<chartjs-pie></chartjs-pie>

Set Scales Display

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

Set Hight and Width

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

Set Labels and Data

<chartjs-pie :datalabel="'TestDataLabel'" :labels="['happy','myhappy','hello']" :data="[100,40,60]"></chartjs-pie>
<chartjs-pie :datalabel="mylabel" :labels="mylabels" :data="mydata"></chartjs-pie>
<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-pie
    :beginzero="true"
    :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-pie>
<chartjs-pie
    :beginzero="true"
    :backgroundcolor="mybackgroundcolor"
    :bordercolor="mybordercolor"
    :hoverbordercolor="myhoverbordercolor">
</chartjs-pie>
<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)'],
            mylabels : ['happy','myhappy','hello'],
            mydata : [100,40,60]
        },
    });
</script>

Override

Override Datasets

<chartjs-pie :labels="mylabels" :datasets="mydatasets"></chartjs-pie>
<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-pie:option="myoption"></chartjs-pie>
<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>