React + Highcharts

by mustapha mekhatria

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, {
  chart: {
    type: 'spline'
  },
  title: {
    text: 'My chart'
  },
  series: [
    {
      data: [1, 2, 1, 4, 3, 6]
    }
  ]
    })
  }

  render() {
    return <div className="chart" ref={ref => this.container = ref} />
  }
}

const title = 'Historic and Estimated Worldwide Population Distribution by Region'
const data = [{
  name: 'Asia',
  data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
  name: 'Africa',
  data: [106, 107, 111, 133, 221, 767, 1766]
}, {
  name: 'Europe',
  data: [163, 203, 276, 408, 547, 729, 628]
}, {
  name: 'America',
  data: [18, 31, 54, 156, 339, 818, 1201]
}, {
  name: 'Oceania',
  data: [2, 2, 2, 6, 13, 30, 46]
}]

ReactDOM.render(
  <PercentageArea title={title} data={data} />,
  document.getElementById('app')
)