# vue-spider-graph

> Create Spider Graph/Radar Graph

Latest version **1.0.5** (published 2022-03-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-spider-graph
pnpm add vue-spider-graph
yarn add vue-spider-graph
bun add vue-spider-graph
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2022-03-16 |
| First published | 2019-02-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 474.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Bitto Kazi |
| Maintainers | bitto.kazi |
| Keywords | vue, radar-graph, radar, chartjs, chart, graph |

## Links

- npm: https://www.npmjs.com/package/vue-spider-graph
- Repository: https://github.com/bittokazi/vue-spider-graph
- Homepage: https://github.com/bittokazi/vue-spider-graph#readme
- Issues: https://github.com/bittokazi/vue-spider-graph/issues
- npm.io page: https://npm.io/package/vue-spider-graph

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2022-03-16
- 1.0.1 — 2019-02-19

## README

# vue-spider-graph

## Install

```bash
npm install vue-spider-graph --save
```

## Example

![](example.gif)

## Demo Link

[Demo](https://vue-spider-graph.bittokazi.com/)

## Usage

#### Use in Vue Component

```html
<template>
  <div>
    <SpiderGraph
      ref="spiderGraphRef"
      :height="600"
      :width="600"
      :numberOfDataPoints="10"
      :dataRatings="[5,7,4,6,9,3,5,6,8,6]"
      :predefinedRatings="[8,9,7,8,6,8,6,5,9,5]"
      :predefinedRatingsColor="`#F7A61B`"
      :predefinedRatingsGridColor="`rgba(247,166,27, 0.2)`"
      :dataRatingsColor="`#c40d1e`"
      :dataRatingsColorGridColor="`rgba(196,11,30, 0.2)`"
    ></SpiderGraph>
  </div>
</template>
<script>
  import SpiderGraph from "vue-spider-graph";

  new Vue({
    el: "#app",
    components: {
      SpiderGraph,
    },
  });
</script>
```

<br>

#### Change Value and Redraw Graph

```html
<template>
  <div>
    <SpiderGraph
      ref="spiderGraphRef"
      :height="600"
      :width="600"
      :numberOfDataPoints="10"
      :dataRatings="this.dataRatings"
      :predefinedRatings="[8,9,7,8,6,8,6,5,9,5]"
      :predefinedRatingsColor="`#F7A61B`"
      :predefinedRatingsGridColor="`rgba(247,166,27, 0.2)`"
      :dataRatingsColor="`#c40d1e`"
      :dataRatingsColorGridColor="`rgba(196,11,30, 0.2)`"
    ></SpiderGraph>
  </div>
</template>
<script>
  import SpiderGraph from "vue-spider-graph";

  new Vue({
    el: "#app",
    components: {
      SpiderGraph,
    },
    created() {
      this.dataRatings = [5, 7, 4, 6, 9, 3, 5, 6, 8, 6];
    },
    mounted() {
      //I am Changing value of first Index by 1 every second and redrwaing Graph
      let spiderGraph = this.$refs["spiderGraphRef"];
      setInterval(() => {
        if (this.dataRatings[0] == 10) this.dataRatings[0] = 0;
        this.dataRatings[0]++;
        spiderGraph.draw();
      }, 1000);
    },
  });
</script>
```

<br>

## Options

### Props

| Props                      | Default               | Description                                                            |
| -------------------------- | --------------------- | ---------------------------------------------------------------------- |
| height                     | 500                   | Canvas height                                                          |
| width                      | 500                   | Canvas width                                                           |
| numberOfDataPoints         | 10                    | Number Of Rating Data points                                           |
| dataRatings                | []                    | Array of Rating Data points. example: [5,7,4,6,9,3,5,6,8,6]            |
| predefinedRatings          | []                    | Array of Predefined Rating Data points. example: [8,9,7,8,6,8,6,5,9,5] |
| predefinedRatingsColor     | #F7A61B               | Predefined Rating point color                                          |
| predefinedRatingsGridColor | rgba(247,166,27, 0.2) | Predefined Rating Grid color                                           |
| dataRatingsColor           | #c40d1e               | Rating point color                                                     |
| dataRatingsColorGridColor  | rgba(196,11,30, 0.2)  | Rating Grid color                                                      |

### Function

| Name   | Type | Description                     |
| ------ | :--- | ------------------------------- |
| draw() | n/a  | Redraw Graph after Value Change |

---
_Source: https://npm.io/package/vue-spider-graph · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._