React Example

by Guillaume Seguin

HTML

<script src="https://fb.me/react-15.0.1.min.js"></script>
<script src="https://fb.me/react-dom-15.0.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<!-- In usage with Node.js the script tags above needs to be replaced with "require" -->
<!--
var React = require('react'),
    ReactDOM = require('react-dom'),
    Highcharts = require('highcharts'),
    addFunnel = require('highcharts/modules/funnel'),
    usdeur = require('path-to-data');
-->
<!-- Read more about loading highcharts in Node.js here: http://www.highcharts.com/docs/getting-started/install-from-npm -->

<div id="react-app"></div>

JavaScript

var Chart = React.createClass({
    // When the DOM is ready, create the chart.
    componentDidMount: function() {
      // Set container which the chart should render to.
      this.chart = new Highcharts[this.props.type || "Chart"](
        this.props.container,
        this.props.options
      );
    },
    //Destroy chart before unmount.
    componentWillUnmount: function() {
      this.chart.destroy();
    },
    //Create the div which the chart will be rendered to.
    render: function() {
      return React.createElement('div', {
        id: this.props.container
      });
    }
  }),
  element;


// Create and render element
element = React.createElement(Chart, {
  container: 'chart',
  options: {
    chart: {
      type: 'solidgauge'
    },

    title: null,

    pane: {
      center: ['50%', '85%'],
      startAngle: -90,
      endAngle: 90,
      background: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
      }
    },

    tooltip: {
      enabled: false
    },

    // the value axis
    yAxis: {
      stops: [
        [0.1, '#55BF3B'], // green
        [0.5, '#DDDF0D'], // yellow
        [0.9, '#DF5353'] // red
      ],
      lineWidth: 0,
      minorTickInterval: null,
      tickAmount: 2,
      min: 0,
      max: 200,
      title: {
        text: 'Speed',
        y: -100
      },
      labels: {
        y: 16
      },

      credits: {
        enabled: false
      }
    },

    plotOptions: {
      solidgauge: {
        dataLabels: {
          y: 5,
          borderWidth: 0,
          useHTML: true
        }
      }
    },
    
    series: [{
      name: 'Speed',
      data: [80],
      dataLabels: {
        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
        ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
        '<span...