React + Highcharts

by Rambabu Pudi

HTML

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="app"></div>

CSS

.chart {
  min-width: 310px;
  height: 400px;
  max-width: 800px;
  margin: 0 auto;
}

Babel + JSX

// import React from 'react'
// import ReactDOM from 'react-dom'
// import Highcharts from 'highcharts'

class PercentageArea extends React.Component {
  componentDidMount() {
    this.drow(this.props)
  }

  componentWillReceiveProps(nextProps, nextState) {
    this.chart.destroy()
    this.drow(nextProps)
  }

  shouldComponentUpdate() {
  	return false
  }

  componentWillUnmount() {
    this.chart.destroy()
  }

  drow(props) {
		this.chart = Highcharts.chart(this.container, {
     "title":{"text":""},"xAxis":{"categories":["WEEK0","WEEK1","WEEK2","WEEK3","WEEK4","WEEK5","WEEK6","WEEK7","WEEK8","WEEK9","WEEK10","WEEK11","WEEK12","WEEK13","WEEK14","WEEK15","WEEK16","WEEK17","WEEK18","WEEK19","WEEK20","WEEK21","WEEK22","WEEK23","WEEK24","WEEK25","WEEK26","WEEK27","WEEK28","WEEK29","WEEK30","WEEK31","WEEK32","WEEK33","WEEK34","WEEK35","WEEK36","WEEK37","WEEK38","WEEK39","WEEK40","WEEK41","WEEK42","WEEK43","WEEK44","WEEK45","WEEK46","WEEK47","WEEK48","WEEK49","WEEK50","WEEK51"]},"yAxis":[{"title":{"text":"UNIT COST"},"opposite":false},{"title":{"text":"UNIT RETAIL"},"opposite":false}],"series":[{"name":"UNIT...