Radar

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>
        const app = new Vue({
            Vue.use(VueCharts);
            el: '#app'
        });
    </script>
    

Basic Usage

Default Radar

<chartjs-radar></chartjs-radar>
<chartjs-radar></chartjs-radar>

Set Hight and Width

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

Set Begin At Zero

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

Set Labels and Data

<chartjs-radar :datalabel="'TestDataLabel'" :labels="['happy','myhappy','hello']" :data="[100,40,60]"></chartjs-radar>
<chartjs-radar :datalabel="mylabel" :labels="mylabels" :data="mydata"></chartjs-radar>
<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-radar :backgroundcolor="'rgba(75,192,192,0.1)'" :bordercolor="'#00c853'"></chartjs-radar>
<chartjs-radar :backgroundcolor="mybackgroundcolor" :bordercolor="mybordercolor"></chartjs-radar>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            mybackgroundcolor : 'rgba(75,192,192,0.1)',
            mybordercolor : '#00c853'
        },
    });
</script>

Multiple Radar

Radar on Target Canvas

<canvas id="mycanvas" count="3"></canvas>
<chartjs-radar target="mycanvas" :data="[30, 40, 50, 60]"></chartjs-radar>
<chartjs-radar target="mycanvas" :data="[80, 50, 20, 70]"></chartjs-radar>
<chartjs-radar target="mycanvas"></chartjs-radar>
<canvas id="mycanvas" count="3"></canvas>
<chartjs-radar target="mycanvas" :data="first_data"></chartjs-radar>
<chartjs-radar target="mycanvas" :data="second_data"></chartjs-radar>
<chartjs-radar target="mycanvas"></chartjs-radar>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            first_data : [30, 40, 50, 60],
            second_data : [80, 50, 20, 70]
        },
    });
</script>

Different Color

<canvas id="mycanvas2" count="2"></canvas>
<chartjs-radar
    target="mycanvas2"
    :data="[10, 90, 60, 60]"
    :backgroundcolor="'rgba(255,99,132,0.2)'"
    :bordercolor="'rgba(255,99,132,1)'">
</chartjs-radar>
<chartjs-radar target="mycanvas2"></chartjs-radar>
<canvas id="mycanvas2" count="2"></canvas>
<chartjs-radar
    target="mycanvas2"
    :data="first_data"
    :backgroundcolor="first_backgroundcolor"
    :bordercolor="first_bordercolor">
</chartjs-radar>
<chartjs-radar target="mycanvas2"></chartjs-radar>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            first_data : [10, 90, 60, 60],
            first_backgroundcolor : 'rgba(255,99,132,0.2)',
            first_bordercolor : 'rgba(255,99,132,1)'
        },
    });
</script>

Override

Override Datasets

<chartjs-radar :labels="mylabels" :datasets="mydatasets"></chartjs-radar>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            mylabels: ["January", "February", "March", "April", "May", "June", "July"],
            mydatasets:[{
                label: "My First dataset",
                backgroundColor: "rgba(179,181,198,0.2)",
                borderColor: "rgba(179,181,198,1)",
                pointBackgroundColor: "rgba(179,181,198,1)",
                pointBorderColor: "#fff",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(179,181,198,1)",
                data: [65, 59, 90, 81, 56, 55, 40]
            },
            {
                label: "My Second dataset",
                backgroundColor: "rgba(255,99,132,0.2)",
                borderColor: "rgba(255,99,132,1)",
                pointBackgroundColor: "rgba(255,99,132,1)",
                pointBorderColor: "#fff",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(255,99,132,1)",
                data: [28, 48, 40, 19, 96, 27, 100]
            }],
        },
    });
</script>

Override Option

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