react-highcharts alignThreshold

Question

I just turned my app into a react frontend and i have some Graphing component. I need to alignThresholds set to true and used the experimental script of Torstein Hønsi so far. http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/studies/alignthresholds/

Is there an easy way to integrate this script?

import React from 'react'
import ReactHighcharts from 'react-highcharts/bundle/ReactHighcharts';

class Graphing extends React.Component {
  constructor(props) {
    super(props)
    this.graphConfig = this.graphConfig.bind(this);
  }

  render(){
    console.log(this.props);
    if(this.props.active){
      return (<ReactHighcharts config = {this.graphConfig()}></ReactHighcharts>)
    }else{
      return (<div>Click a row to get the Graph</div>)
    }
  }

  graphConfig(){
    return {
      title:{
            text:''
          },
          subTitle:{
            text:''
          },
          chart: {
            alignThresholds: true,
            height:this.props.height,
            events: {
              load: function() {
                  //addPlotBandsToWeekends();
                    },
            },
           },
          xAxis: {
            type: 'datetime',
            min: this.props.startDate,
            max: this.props.endDate
          },
          yAxis: [{
            title: {
              text: 'USD($)',
            },
            opposite: true
          },{
            title: {
              text: 'Visits',
            },
            opposite: false
          }],
          tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y}</b></span><br/>',
            valuePrefix: '{series.options.unit}',
            shared: true
          },
          legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
          },
          series: [{
            name: 'Profit',
            yAxis: 0,
            data: this.props.data.map(function(item){return([item.end_time,item.profit])}),
            color: "rgb(132, 195, 51)",
            unit: "$"
          },
      {
        name: 'Cumulative Profit',
        yAxis: 0,
        data: this.props.data.map(function(item){return([item.end_time,item.cumulativeProfit])}),
        color: "rgb(0, 255, 36)",
        unit: "$",
        visible: false
      },
      {
        name: 'Revenue',
        data: this.props.data.map(function(item){return([item.end_time,item.revenue])}),
        color: "rgb(255, 158, 53)",
        unit: "$"
      },
      {
        name: 'Cumulative Revenue',
        data: this.props.data.map(function(item){return([item.end_time,item.cumulativeRevenue])}),
        color: "rgb(255, 200, 100)",
        unit: "$",
        visible: false
      },
      {
        name: 'Cost',
        data: this.props.data.map(function(item){return([item.end_time,item.cost])}),
        color: "rgb(232, 79, 54)",
        unit: "$"
      },
      {
        name: 'Cumulative Cost',
        data: this.props.data.map(function(item){return([item.end_time,item.cumulativeCost])}),
        color: "rgb(255, 10, 75)",
        unit: "$",
        visible: false
      },
      {
        name: 'Visits',
        yAxis: 1,
        data: this.props.data.map(function(item){return([item.end_time,item.visits])}),
        color: "rgb(86, 60, 119)",
        unit: ""
      },
      {
        name: 'Cumulative Visits',
        yAxis: 1,
        data: this.props.data.map(function(item){return([item.end_time,item.cumulativeVisits])}),
        color: "rgb(255, 47, 218)",
        unit: "",
        visible: false
      },
      {
        name: 'Conversions',
        yAxis: 1,
        data: this.props.data.map(function(item){return([item.end_time,item.conversions])}),
        color: "rgb(44, 167, 227)",
        unit: ""
      },
      {
        name: 'Cumulative Conversions',
        yAxis: 1,
        data: this.props.data.map(function(item){return([item.end_time,item.cumulativeConversions])}),
        color: "rgb(50, 100, 200)",
        unit: "",
        visible: false
      }]
    };

  }
}

export default Graphing;

Answer 1

The plugin should work fine, you just need to pass the instance of Highcharts that react-highcharts is using.

It is exposed as ReactHighcharts.Highcharts, that's what you should pass to the plugin (see line 59 in jsfiddle).