https://github.com/shauns/react-d3-radar
React-based Radar chart for D3
https://github.com/shauns/react-d3-radar
chart d3 radar-chart react
Last synced: 12 months ago
JSON representation
React-based Radar chart for D3
- Host: GitHub
- URL: https://github.com/shauns/react-d3-radar
- Owner: shauns
- License: mit
- Created: 2017-01-31T16:30:38.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2021-01-28T11:07:24.000Z (over 5 years ago)
- Last Synced: 2025-06-27T11:05:46.344Z (about 1 year ago)
- Topics: chart, d3, radar-chart, react
- Language: JavaScript
- Size: 119 KB
- Stars: 53
- Watchers: 2
- Forks: 32
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-d3-radar
[](https://travis-ci.org/shauns/react-d3-radar)
React-based Radar chart for D3
## What is this?
D3v4's modular structure means you can pull in things like the scaling or colour logic, and leave out DOM functionality if you're using D3 in an environment that 'owns' the DOM -- such as React.
This is a Radar chart component for displaying multiple sets of data. Hovering is supported via `d3-voronoi`.
## Examples
```js
import Radar from 'react-d3-radar';
{
if (point) {
console.log('hovered over a data point');
} else {
console.log('not over anything');
}
}}
data={{
variables: [
{key: 'resilience', label: 'Resilience'},
{key: 'strength', label: 'Strength'},
{key: 'adaptability', label: 'Adaptability'},
{key: 'creativity', label: 'Creativity'},
{key: 'openness', label: 'Open to Change'},
{key: 'confidence', label: 'Confidence'},
],
sets: [
{
key: 'me',
label: 'My Scores',
values: {
resilience: 4,
strength: 6,
adaptability: 7,
creativity: 2,
openness: 8,
confidence: 1,
},
},
{
key: 'everyone',
label: 'Everyone',
values: {
resilience: 10,
strength: 8,
adaptability: 6,
creativity: 4,
openness: 2,
confidence: 0,
},
},
],
}}
/>
```
## API
### <Radar />
Renders a Radar chart in SVG (creates its own `svg` element). Props are as per the example above.