1.0.6 • Published 5 years ago
react-spider-chart v1.0.6
react-spider-chart
A svg spider chart which includes user interaction and customization
Install
npm install --save react-spider-chart
How it looks
Usage
import React, { Component } from 'react'
import SpiderChart from 'react-spider-chart'
import './styles.css';
import Icon1 from './assets/circle1.png';
import Icon2 from './assets/circle2.png';
import Icon3 from './assets/circle3.png';
import Icon4 from './assets/circle4.png';
import Icon5 from './assets/circle5.png';
const chartData = {
data: [
{ caption: "United States", status: 40, icon: Icon1 },
{ caption: "Australia", status: 70, icon: Icon2 },
{ caption: "France", status: 90, icon: Icon3 },
{ caption: "India", status: 60, icon: Icon4 },
{ caption: "China", status: 30, icon: Icon5 },
{ caption: "UAE", status: 100, icon: Icon5 }
],
props: {
size: 400,
axes: true, // show axes?
scales: 5, // show scale circles?
captions: true, // show captions?
captionIndex : true, // show caption indexes
icons: true, // show icons
circleFill : false,
zoomDistance: 1, // where on the axes are the captions?
drawSize: 4,
captionMargin: 10,
onClick: function iconOnClick(item) {
alert(item.key);
},
onShapeClick: function onShapeClick(item) {
//alert(item.key);
},
axisProps: () => ({ className: 'axis' }),
circleProps: () => ({ className: ' circle' }),
indexProps: () => ({ className: 'index',fontSize:18 }),
scaleProps: () => ({ className: 'scale', fill: 'none' }),
shapeProps: () => ({ className: 'shape' }),
iconProps: () => ({ className: 'icon' }),
fillCircleProps: (style) => ({ className: style }),
captionProps: (style) => ({
className: style,
textAnchor: 'middle',
fontSize: 10,
fontFamily: 'Source Sans Pro'
}),
}
};
export default class App extends Component {
render () {
return (
<div style={{margin:'0 auto',width:'36%',height:'36%'}}>
<SpiderChart
data={chartData.data}
props={chartData.props}
/>
</div>
)
}
}
License
ISC © udhayakumarpandiyan