import React from 'react' import styles from './Spider.css' import Highcharts from 'highcharts-release/highstock' import 'highcharts-release/highcharts-more' type Props = { xData: Array, chartData: Array, title: String } class Spider extends React.Component { props: Props componentDidMount () { this.draw() } draw () { const container = this.refs.container Highcharts.chart(container, { chart: { backgroundColor: 'transparent', polar: true, type: 'line' }, title: { text: this.props.title, x: -20 }, credits:{ enabled: false }, tooltip: { shared: true }, legend: { align: 'right', verticalAlign: 'top', y: 70, layout: 'vertical' }, xAxis: { categories: this.props.xData, tickmarkPlacement: 'on', lineWidth: 0 }, yAxis: { gridLineInterpolation: 'polygon', lineWidth: 0, min: 0 }, series: this.props.chartData }) } render () { return ( <div ref='container' className={styles['container']} /> ) } } export default Spider