highcharts-react-official/demo/demo.jsx

Official minimal [Highcharts](https://www.highcharts.com/) wrapper for React.

import React from 'react'
import { render } from 'react-dom'
// Import Highcharts
import Highcharts from 'highcharts/highstock'

// Import our demo components
import Chart from './components/Chart.jsx'
import StockChart from './components/Stock.jsx'
import MapChart from './components/Map.jsx'
import Container from './components/Container.jsx'
import mapData from './data/mapData.js'

// Load Highcharts modules
require('highcharts/indicators/indicators')(Highcharts)
require('highcharts/indicators/pivot-points')(Highcharts)
require('highcharts/indicators/macd')(Highcharts)
require('highcharts/modules/exporting')(Highcharts)
require('highcharts/modules/map')(Highcharts)

const chartOptions = {
  title: {
    text: ''
  },
  series: [{
    data: [1,2,3],

  }]
}
const stockOptions = {
  yAxis: [{
    height: '75%',
    labels: {
      align: 'right',
      x: -3
    },
    title: {
      text: 'AAPL'
    }
  }, {
    top: '75%',
    height: '25%',
    labels: {
      align: 'right',
      x: -3
    },
    offset: 0,
    title: {
      text: 'MACD'
    }
  }],
  series: [{
    data: [
      /* Jan 2017 */
      [1483401600000,115.80,116.33,114.76,116.15],
      [1483488000000,115.85,116.51,115.75,116.02],
      [1483574400000,115.92,116.86,115.81,116.61],
      [1483660800000,116.78,118.16,116.47,117.91],
      [1483920000000,117.95,119.43,117.94,118.99],
      [1484006400000,118.77,119.38,118.30,119.11],
      [1484092800000,118.74,119.93,118.60,119.75],
      [1484179200000,118.90,119.30,118.21,119.25],
      [1484265600000,119.11,119.62,118.81,119.04],
      [1484611200000,118.34,120.24,118.22,120.00],
      [1484697600000,120.00,120.50,119.71,119.99],
      [1484784000000,119.40,120.09,119.37,119.78],
      [1484870400000,120.45,120.45,119.73,120.00],
      [1485129600000,120.00,120.81,119.77,120.08],
      [1485216000000,119.55,120.10,119.50,119.97],
      [1485302400000,120.42,122.10,120.28,121.88],
      [1485388800000,121.67,122.44,121.60,121.94],
      [1485475200000,122.14,122.35,121.60,121.95],
      [1485734400000,120.93,121.63,120.66,121.63],
      [1485820800000,121.15,121.39,120.62,121.35],
      /* Feb 2017 */
      [1485907200000,127.03,130.49,127.01,128.75],
      [1485993600000,127.98,129.39,127.78,128.53],
      [1486080000000,128.31,129.19,128.16,129.08],
      [1486339200000,129.13,130.50,128.90,130.29],
      [1486425600000,130.54,132.09,130.45,131.53],
      [1486512000000,131.35,132.22,131.22,132.04],
      [1486598400000,131.65,132.44,131.12,132.42],
      [1486684800000,132.46,132.94,132.05,132.12],
      [1486944000000,133.08,133.82,132.75,133.29],
      [1487030400000,133.47,135.09,133.25,135.02],
      [1487116800000,135.52,136.27,134.62,135.51],
      [1487203200000,135.67,135.90,134.84,135.34],
      [1487289600000,135.10,135.83,135.10,135.72],
      [1487635200000,136.23,136.75,135.98,136.70],
      [1487721600000,136.43,137.12,136.11,137.11],
      [1487808000000,137.38,137.48,136.30,136.53],
      [1487894400000,135.91,136.66,135.28,136.66],
      [1488153600000,137.14,137.44,136.28,136.93],
      [1488240000000,137.08,137.44,136.70,136.99],
      /* Mar 2017 */
      [1488326400000,137.89,140.15,137.60,139.79],
      [1488412800000,140.00,140.28,138.76,138.96],
      [1488499200000,138.78,139.83,138.59,139.78],
      [1488758400000,139.36,139.77,138.60,139.34],
      [1488844800000,139.06,139.98,138.79,139.52],
      [1488931200000,138.95,139.80,138.82,139.00],
      [1489017600000,138.74,138.79,137.05,138.68],
      [1489104000000,139.25,139.36,138.64,139.14],
      [1489363200000,138.85,139.43,138.82,139.20],
      [1489449600000,139.30,139.65,138.84,138.99],
      [1489536000000,139.41,140.75,139.02,140.46],
      [1489622400000,140.72,141.02,140.26,140.69],
      [1489708800000,141.00,141.00,139.89,139.99],
      [1489968000000,140.40,141.50,140.23,141.46],
      [1490054400000,142.11,142.80,139.73,139.84],
      [1490140800000,139.84,141.60,139.76,141.42],
      [1490227200000,141.26,141.58,140.61,140.92],
      [1490313600000,141.50,141.74,140.35,140.64],
      [1490572800000,139.39,141.22,138.62,140.88],
      [1490659200000,140.91,144.04,140.62,143.80],
      [1490745600000,143.68,144.49,143.19,144.12],
      [1490832000000,144.19,144.50,143.50,143.93],
      [1490918400000,143.72,144.27,143.01,143.66],
      /* Apr 2017 */
      [1491177600000,143.71,144.12,143.05,143.70],
      [1491264000000,143.25,144.89,143.17,144.77],
      [1491350400000,144.22,145.46,143.81,144.02],
      [1491436800000,144.29,144.52,143.45,143.66],
      [1491523200000,143.73,144.18,143.27,143.34],
      [1491782400000,143.60,143.88,142.90,143.17],
      [1491868800000,142.94,143.35,140.06,141.63],
      [1491955200000,141.60,142.15,141.01,141.80],
      [1492041600000,141.91,142.38,141.05,141.05],
      [1492387200000,141.48,141.88,140.87,141.83],
      [1492473600000,141.41,142.04,141.11,141.20],
      [1492560000000,141.88,142.00,140.45,140.68],
      [1492646400000,141.22,142.92,141.16,142.44],
      [1492732800000,142.44,142.68,141.85,142.27],
      [1492992000000,143.50,143.95,143.18,143.64],
      [1493078400000,143.91,144.90,143.87,144.53],
      [1493164800000,144.47,144.60,143.38,143.68],
      [1493251200000,143.92,144.16,143.31,143.79],
      [1493337600000,144.09,144.30,143.27,143.65],
      /* May 2017 */
      [1493596800000,145.10,147.20,144.96,146.58],
      [1493683200000,147.54,148.09,146.84,147.51],
      [1493769600000,145.59,147.49,144.27,147.06],
      [1493856000000,146.52,147.14,145.81,146.53],
      [1493942400000,146.76,148.98,146.76,148.96],
      [1494201600000,149.03,153.70,149.03,153.01],
      [1494288000000,153.87,154.88,153.45,153.99],
      [1494374400000,153.63,153.94,152.11,153.26],
      [1494460800000,152.45,154.07,152.31,153.95],
      [1494547200000,154.70,156.42,154.67,156.10],
      [1494806400000,156.01,156.65,155.05,155.70],
      [1494892800000,155.94,156.06,154.72,155.47],
      [1494979200000,153.60,154.57,149.71,150.25],
      [1495065600000,151.27,153.34,151.13,152.54],
      [1495152000000,153.38,153.98,152.63,153.06],
      [1495411200000,154.00,154.58,152.91,153.99],
      [1495497600000,154.90,154.90,153.31,153.80],
      [1495584000000,153.84,154.17,152.67,153.34],
      [1495670400000,153.73,154.35,153.03,153.87],
      [1495756800000,154.00,154.24,153.31,153.61],
      [1496102400000,153.42,154.43,153.33,153.67],
      [1496188800000,153.97,154.17,152.38,152.76],
      /* Jun 2017 */
      [1496275200000,153.17,153.33,152.22,153.18],
      [1496361600000,153.58,155.45,152.89,155.45],
      [1496620800000,154.34,154.45,153.46,153.93],
      [1496707200000,153.90,155.81,153.78,154.45],
      [1496793600000,155.02,155.98,154.48,155.37],
      [1496880000000,155.25,155.54,154.40,154.99],
      [1496966400000,155.19,155.19,146.02,148.98],
      [1497225600000,145.74,146.09,142.51,145.42],
      [1497312000000,147.16,147.45,145.15,146.59],
      [1497398400000,147.50,147.50,143.84,145.16],
      [1497484800000,143.32,144.48,142.21,144.29],
      [1497571200000,143.78,144.50,142.20,142.27],
      [1497830400000,143.66,146.74,143.66,146.34],
      [1497916800000,146.87,146.87,144.94,145.01],
      [1498003200000,145.52,146.07,144.61,145.87],
      [1498089600000,145.77,146.70,145.12,145.63],
      [1498176000000,145.13,147.16,145.11,146.28],
      [1498435200000,147.17,148.28,145.38,145.82],
      [1498521600000,145.01,146.16,143.62,143.73],
      [1498608000000,144.49,146.11,143.16,145.83],
      [1498694400000,144.71,145.13,142.28,143.68],
      [1498780800000,144.45,144.96,143.78,144.02],
      /* Jul 2017 */
      [1499040000000,144.88,145.30,143.10,143.50],
      [1499212800000,143.69,144.79,142.72,144.09],
      [1499299200000,143.02,143.50,142.41,142.73],
      [1499385600000,142.90,144.75,142.90,144.18],
      [1499644800000,144.11,145.95,143.37,145.06],
      [1499731200000,144.73,145.85,144.38,145.53],
      [1499817600000,145.87,146.18,144.82,145.74],
      [1499904000000,145.50,148.49,145.44,147.77],
      [1499990400000,147.97,149.33,147.33,149.04],
      [1500249600000,148.82,150.90,148.57,149.56],
      [1500336000000,149.20,150.13,148.67,150.08],
      [1500422400000,150.48,151.42,149.95,151.02],
      [1500508800000,151.50,151.74,150.19,150.34],
      [1500595200000,149.99,150.44,148.88,150.27],
      [1500854400000,150.58,152.44,149.90,152.09],
      [1500940800000,151.80,153.84,151.80,152.74],
      [1501027200000,153.35,153.93,153.06,153.46],
      [1501113600000,153.75,153.99,147.30,150.56],
      [1501200000000,149.89,150.23,149.19,149.50],
      [1501459200000,149.90,150.33,148.13,148.73],
      /* Aug 2017 */
      [1501545600000,149.10,150.22,148.41,150.05],
      [1501632000000,159.28,159.75,156.16,157.14],
      [1501718400000,157.05,157.21,155.02,155.57],
      [1501804800000,156.07,157.40,155.69,156.39],
      [1502064000000,157.06,158.92,156.67,158.81],
      [1502150400000,158.60,161.83,158.27,160.08],
      [1502236800000,159.26,161.27,159.11,161.06],
      [1502323200000,159.90,160.00,154.63,155.32],
      [1502409600000,156.60,158.57,156.07,157.48],
      [1502668800000,159.32,160.21,158.75,159.85],
      [1502755200000,160.66,162.20,160.14,161.60],
      [1502841600000,161.94,162.51,160.15,160.95],
      [1502928000000,160.52,160.71,157.84,157.86],
      [1503014400000,157.86,159.50,156.72,157.50],
      [1503273600000,157.50,157.89,155.11,157.21],
      [1503360000000,158.23,160.00,158.02,159.78],
      [1503446400000,159.07,160.47,158.88,159.98],
      [1503532800000,160.43,160.74,158.55,159.27],
      [1503619200000,159.65,160.56,159.27,159.86],
      [1503878400000,160.14,162.00,159.93,161.47],
      [1503964800000,160.10,163.12,160.00,162.91],
      [1504051200000,163.80,163.89,162.61,163.35],
      [1504137600000,163.64,164.52,163.48,164.00],
      /* Sep 2017 */
      [1504224000000,164.80,164.94,163.63,164.05],
      [1504569600000,163.75,164.25,160.56,162.08],
      [1504656000000,162.71,162.99,160.52,161.91],
      [1504742400000,162.09,162.24,160.36,161.26],
      [1504828800000,160.86,161.15,158.53,158.63],
      [1505088000000,160.50,162.05,159.89,161.50],
      [1505174400000,162.61,163.96,158.77,160.86],
      [1505260800000,159.87,159.96,157.91,159.65],
      [1505347200000,158.99,159.40,158.09,158.28],
      [1505433600000,158.47,160.97,158.00,159.88],
      [1505692800000,160.11,160.50,158.00,158.67],
      [1505779200000,159.51,159.77,158.44,158.73],
      [1505865600000,157.90,158.26,153.83,156.07],
      [1505952000000,155.80,155.80,152.75,153.39],
      [1506038400000,151.54,152.27,150.56,151.89],
      [1506297600000,149.99,151.83,149.16,150.55],
      [1506384000000,151.78,153.92,151.69,153.14],
      [1506470400000,153.80,154.72,153.54,154.23],
      [1506556800000,153.89,154.28,152.70,153.28],
      [1506643200000,153.21,154.13,152.00,154.12],
      /* Oct 2017 */
      [1506902400000,154.26,154.45,152.72,153.81],
      [1506988800000,154.01,155.09,153.91,154.48],
      [1507075200000,153.63,153.86,152.46,153.48],
      [1507161600000,154.18,155.44,154.05,155.39],
      [1507248000000,154.97,155.49,154.56,155.30],
      [1507507200000,155.81,156.73,155.48,155.84],
      [1507593600000,156.06,158.00,155.10,155.90],
      [1507680000000,155.97,156.98,155.75,156.55],
      [1507766400000,156.35,157.37,155.73,156.00],
      [1507852800000,156.73,157.28,156.41,156.99]
    ],
    type: 'ohlc',
    name: 'AAPL Stock Price',
    id: 'aapl'
  }, {
    type: 'pivotpoints',
    linkedTo: 'aapl',
    zIndex: 0,
    lineWidth: 1,
    dataLabels: {
      overflow: 'none',
      crop: false,
      y: 4,
      style: {
        fontSize: 9
      }
    }
  }, {
    type: 'macd',
    yAxis: 1,
    linkedTo: 'aapl'
  }]
}

const mapOptions = {
  title: {
    text: ''
  },
  colorAxis: {
    min: 0,
    stops: [
      [0, '#EFEFFF'],
      [0.67, '#4444FF'],
      [1, '#000022']
    ]
  },
  tooltip: {
    pointFormatter: function() {
      return this.properties['woe-label'].split(',')[0];
    }
  },
  series: [{
    mapData: mapData,
    dataLabels: {
      formatter: function() {
        return this.point.properties['woe-label'].split(',')[0];
      }
    },
    name: 'Norway',
    data: [
      ['no-mr', 0],
      ['no-st', 1],
      ['no-ho', 2],
      ['no-sf', 42],
      ['no-va', 4],
      ['no-of', 5],
      ['no-nt', 6],
      ['no-ro', 7],
      ['no-bu', 8],
      ['no-vf', 9],
      ['no-fi', 10],
      ['no-no', 11],
      ['no-tr', 12],
      ['no-ak', 13],
      ['no-op', 14],
      ['no-he', 15],
      ['no-os', 16],
      ['no-te', 17],
      ['no-aa', 18]
    ]
  }]
}

// Render app with demo chart
class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      options: {
        series: chartOptions.series
      }
    }
    this.onClick = this.onClick.bind(this)
  }

  onClick() {
    this.setState({
      options: {
        series: [{
          data: [1, 2, 3]
        },
        {
          data: [2, 3, 1]
        },
        {
          data: [3, 2, 1]
        }]
      }
    })
  }

  render() {
    return <div>
      <h1>Demos</h1>

      <h2>Highcharts</h2>
      <Chart options={this.state.options} highcharts={Highcharts} />
      <button onClick={this.onClick}>Update Series</button>

      <h2>Highstock</h2>
      <StockChart options={stockOptions} highcharts={Highcharts} />

      <h2>Highmaps</h2>
      <MapChart options={mapOptions} highcharts={Highcharts} />

      <h2>Live updating chart</h2>
      <Container />
    </div>
  }
}

render(<App />, document.getElementById('root'))