Skip to content
Vue component to make Radar Diagram
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
Radar.vue
package.json

README.md

V-Radar

This is a Vue component, you can create a radar diagramm with it. Find it on Github !

global

How to install it:

npm install vue-radar

Import it where you need it and don't forget to add it to your components object.

How to use it:

You need to provide statistics, polycolor, radar and scale data to use the v-radar component.

Example:

example

template:

<v-radar
    :stats="stats"
    :polycolor="polycolor"
    :radar="radar"
    :scale="scale">
</v-radar>

Minimum script required:

import Radar from 'vue-radar'

new Vue({
    components: {
        'v-radar': Radar
    },
    data: {
        radar: {},                          // empty object is mandatory
        scale: {},                          // empty object is mandatory
        stats: [                            // at least 3 stats are required here
            {
                name: 'stat1',              // string
                value: 12,                  // int
            },
            {
                name: 'stat2',  
                value: 77,      
            },
            {
                name: 'stat3',
                value: 44,
            },
        ],
        polycolor: 'rgba(250, 100, 50, .5)' // any css format is usable (hexa, rgb, rgba...)
    },
})

Full data available:

import Radar from 'vue-radar'

new Vue({
    components: {
        'radar': Radar
    },
    data: {
        radar: {
            size: '400',                                // pixel unit
            viewbox: '1000',                            // unit used inside the svg (here 400px = 1000 unités)
            radius: '350',                              // same unit than above (diamètre = 900), keep the radius < (viewbox / 2)
            structure: {
                external: {                             // external stroke of the structure's polygon
                    strokeColor: 'rgba(0, 0, 0, 1)',    // color (any css format is usable (hexa, rgb, rgba...))
                    strokeWidth: '4',                   // pixel unit
                },
                internals: {                            // internals stroke of the structure's polygon (one every 10%)
                    strokeColor: 'rgba(0, 0, 0, .3)',   // color (any css format is usable (hexa, rgb, rgba...))
                    strokeWidth: '1',                   // pixel unit
                },
                average: {                              // average polygon (placed at 50%)
                    strokeColor: 'rgba(0, 0, 0, 1)',    // stroke color (any css format is usable (hexa, rgb, rgba...))
                    strokeWidth: '2',                   // pixel unit
                    fillColor: 'rgba(0, 0, 0, .5)',     // polygon color (any css format is usable (hexa, rgb, rgba...))
                },
            },
            lines: {                                    // lines from center to summits
                strokeColor: 'rgba(0, 0, 0, .3)',       // color (any css format is usable (hexa, rgb, rgba...))
                strokeWidth: '1',                       // pixel unit
            }
        },
        scale: {                                        // scales of corresponding statistic
            stat1: 24,                                  // key must be equal to the corresponding statistic, lowercased and without accents
            stat2: 100,
            stat3: 100,
        },
        stats: [
            {
                name: 'stat1',                          // string
                value: 12,                              // int
                shortName: 'A',                         // The two first letters are used to be display next to their corresponding summits
            },
            {
                name: 'stat2',
                value: 77,
                shortName: 'Super stat'
            },
            {
                name: 'stat3',
                value: 44,
                shortName: 'st'
            },
        ],
        polycolor: 'rgba(250, 100, 50, .5)'             // color (any css format is usable (hexa, rgb, rgba...))
    },
})
You can’t perform that action at this time.