Polar Area

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 Plar Area

<chartjs-polar-area></chartjs-polar-area>
<chartjs-polar-area></chartjs-polar-area>

Set Scales Display

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

Set Hight and Width

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

Set Labels and Data

<chartjs-polar-area :datalabel="'TestDataLabel'" :labels="['happy','myhappy','hello']" :data="[100,40,60]"></chartjs-polar-area>
<chartjs-polar-area :datalabel="mylabel" :labels="mylabels" :data="mydata"></chartjs-polar-area>
<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-polar-area
    :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,192,192,1)','rgba(0,192,192,1)','rgba(75,192,0,1)','rgba(75,192,192,1)']">
</chartjs-polar-area>
<chartjs-polar-area
    :beginzero="myboolean"
    :backgroundcolor="mybackgroundcolor"
    :bordercolor="mybordercolor">
</chartjs-polar-area>
<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,192,192,1)','rgba(0,192,192,1)','rgba(75,192,0,1)','rgba(75,192,192,1)'],
            myboolean : true
        },
    });
</script>

Override

Override Datasets

<chartjs-polar-area :labels="mylabels" :datasets="mydatasets"></chartjs-polar-area>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            mylabels: ["Red", "Green", "Yellow", "Grey", "Blue"],
            mydatasets:[{
                data: [11, 16, 7, 3, 14],
                backgroundColor: [
                    "#FF6384",
                    "#4BC0C0",
                    "#FFCE56",
                    "#E7E9ED",
                    "#36A2EB"
                ],
                label: 'My dataset' // for legend
            }]
        },
    });
</script>

Override Option

<chartjs-polar-area :option="myoption"></chartjs-polar-area>
<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>