CODEWITHSUNDEEP
reactjshighcharts
anderish
anderish

Reputation: 1759

React Highstock Won't Work But Highchart works

I would like to switch from React Highcharts to React Highstock because of the compare option I would like to use in Highstock. Here is my config:

var config = {
  credits: {
    enabled: false
  },
  title: {
    text: '' // No Title
  },
  chart: {
    height: 200,
    type: 'line',
    backgroundColor: 'rgba(155, 255, 255, 0.0)' // Always transparent Background
  },
  tooltip: {
    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
    valueDecimals: 2,
    split: true
  },
  yAxis: {
    labels: {
      format: '$ {value}' // Always Money
    },
    title: {
      text: '' // No Label
    }
  },
  xAxis: {
    type: 'datetime',
    labels: {
      format: '{value:%Y\'%b}'
    },
    tickInterval: getTickInterval(this.props.interval),
  },
  plotOptions: {
    series: {
      color: transformColor(this.props.color),
      lineWidth: 1,
      compare: 'percent',
      showInNavigator: true
    },
    line: {
      marker: {
        enabled: false
      }
    }
  },
  legend: {
    layout:'vertical',
    align: getLegendPosition(this.props.legend).align,
    verticalAlign: getLegendPosition(this.props.legend).verticalAlign,
    x: getLegendPosition(this.props.legend).x,
    y: getLegendPosition(this.props.legend).y,
    floating: true,
    itemStyle: {
      font: 'sans-serif',
      fontWeight: 'bold',
      fontSize: '9px'
    },
    symbolHeight: 10,
    symbolWidth: 10
  },
  series: this.props.series
};

return (
    <div>
      <ReactHighcharts config={config}/>
    </div>
)
}

But when I switch to Highstock:

return (
    <div>
      <ReactHighstock config={config}/>
    </div>
)

It gives me an error:

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/Highstock.a88db6d5.jsx') is not a valid name.

Any ideas?

Upvotes: 1

Views: 254

Answers (1)

anderish
anderish

Reputation: 1759

Nevermind, don't actually use the React-Highstock npm package. Just do this:

const ReactHighstock = require('react-highcharts/ReactHighstock');

Upvotes: 1

Related Questions