whawker / react-jsx-highcharts

Highcharts built with proper React components

Highcharts built with proper React components. More that just a simple wrapper - utilises the power of React props to create dynamic charts!

React JSX Highcharts offers separate packages for each Highcharts product.

Highcharts

Highstock

Highmaps

Why React JSX Highcharts?

Unlike other React Highcharts wrapper libraries, React JSX Highcharts is designed to be dynamic - it is optimised for interactive charts that need to adapt to business logic in your React application.

Other Highcharts wrappers completely destroy and recreate the chart when the configuration options change, which is very wasteful and inefficient.

React JSX Highcharts uses a different approach. By providing React components for each Highcharts component, we can observe exactly which prop has changed and call the optimal Highcharts method behind the scenes. For example, if the data prop were to change on a <Series /> component, React JSX Highcharts can follow Highcharts best practices and use the setData method rather than the more expensive update.

React JSX Highcharts also enables you to write your own Highcharts components, via its exposed hooks.

Installation

# Install the appropriate React JSX package
npm install --save react-jsx-highcharts
#               or react-jsx-highstock
#               or react-jsx-highmaps

# And the peer dependencies
npm install --save react react-dom highcharts@^9.0.0

Licensing

React JSX Highcharts is free to use, however Highcharts itself requires a license for commercial use. Highcharts license FAQs.

Documentation

Examples

Getting started

The intention of this library is to provide a very thin abstraction of Highcharts using React components. This has been achieved by passing Highcharts configuration options as component props.

In the vast majority of cases, the name of the configuration option, and the name of the component prop are the same.

Example

<Tooltip /> component

<Tooltip padding={10} hideDelay={250} shape="square" split />

This corresponds to the Highcharts' tooltip configuration of

tooltip: {
  enabled: true, // This is assumed when component is mounted
  padding: 10,
  hideDelay: 250,
  shape: 'square',
  split: true
}

We aim to pass all configuration options using the same name, so we use Highcharts' documentation to figure out how to achieve the same with React JSX Highcharts.

Note:

There are two exceptions to the above;

Exception 1

Where Highcharts events are concerned - instead of passing events as an object, we use the React convention onEventName.

Example

<SplineSeries
  id="my-series"
  data={myData}
  onHide={this.handleHide}
  onShow={this.handleShow}
/>

This would correspond to the Highcharts configuration

series: [
  {
    type: 'spline',
    id: 'my-series',
    data: myData,
    events: { hide: this.handleHide, show: this.handleShow }
  }
];

Exception 2

text configuration options are passed as a React child

Example

<Title>Some Text Here</Title>

This would correspond to the Highcharts configuration

title: {
  text: 'Some Text Here';
}

Acknowledgements

Thanks to Recharts for the inspiration of building charts with separate components.

Thanks to Highcharts themselves, obviously.

Thanks to @anajavi for all the help and support in maintaining this project.

react-jsx-highcharts's Issues

Unmount issue with AxisTitle

Hi, another unmount issue :(

I only have a minified stacktrace, but the code relates to this commit: 78ceaab

This was working in the 1.3.3 release.

// AxisTitle.js
componentWillUnmount () {
    if (this.props.getAxis()) { // getAxis throws the error
      this.updateAxisTitle({
        text: null
      });
    }
  }

highstock.js:formatted:1 Uncaught TypeError: Array.prototype.find called on null or undefined
    at find (native)
    at a.find (http://localhost:8080/bundle.js:43982:452)
    at a.Chart.get (http://localhost:8080/bundle.js:44208:343)
    at Object.v [as getAxis] (http://localhost:8080/bundle.js:70719:6862)
    at t.value (http://localhost:8080/bundle.js:70719:26192)
    at http://localhost:8080/bundle.js:63416:25
    at measureLifeCyclePerf (http://localhost:8080/bundle.js:63083:12)
    at ReactCompositeComponentWrapper.unmountComponent (http://localhost:8080/bundle.js:63415:11)
    at Object.unmountComponent (http://localhost:8080/bundle.js:5469:22)
    at ReactCompositeComponentWrapper.unmountComponent (http://localhost:8080/bundle.js:63425:23)

And also this one:

// Series.js
componentWillUnmount () {
    if (this.props.getSeries()) { // getSeries will throw the error below
      this.props.remove(); // Series may have already been removed, i.e. when Axis unmounted
    }
  }

Uncaught TypeError: Array.prototype.find called on null or undefined
    at find (native)
    at a.find (http://localhost:8080/bundle.js:43969:452)
    at a.Chart.get (http://localhost:8080/bundle.js:44195:343)
    at Object.p [as getSeries] (http://localhost:8080/bundle.js:70706:10589)
    at t.value (http://localhost:8080/bundle.js:70706:47999)
    at http://localhost:8080/bundle.js:63403:25
    at measureLifeCyclePerf (http://localhost:8080/bundle.js:63070:12)
    at ReactCompositeComponentWrapper.unmountComponent (http://localhost:8080/bundle.js:63402:11)
    at Object.unmountComponent (http://localhost:8080/bundle.js:5469:22)
    at ReactCompositeComponentWrapper.unmountComponent (http://localhost:8080/bundle.js:63412:23)

Loading component

I'd submit a pull request but thought it best to discuss with you first (and improve on my code 😄 ). How about a Loading component? Something like this:

import React from 'react'
import { provideChart } from 'react-jsx-highcharts'

class Loading extends React.Component {
  showLoading() {
    const chart = this.props.getChart()
    chart.showLoading('Loading...')
  }

  hideLoading() {
    const chart = this.props.getChart()
    chart.hideLoading()
  }

  render() {
    this.props.isLoading ? this.showLoading() : this.hideLoading()
    return false
  }
}

export default provideChart(Loading)

And then used like so:

<HighchartsChart>
  ...  
  <Loading isLoading={this.props.isLoading} />
  ...
</HighchartsChart>

Highcharts 6 question

I see there is a dependency on highcharts@^5.0.0, has this been tested with highcharts 6?

Setting 'visible' prop on series not working

Thanks for contributing this. Great stuff. Finally we can have initial animation when charts are renderd 👍

On another note, the visible prop doesn´t seem to work:
http://api.highcharts.com/highcharts/series%3Ccolumn%3E.visible

I´m trying to hide all categories except the first two.

Example from working code:

  prepareSeries(surveys) {
    const series = surveys.map((s, i) => {
      const parties = s.results.list.sort((a,b) => a.ratio - b.ratio).reverse()
        .map(p => {
          return {name: p.text, y: p.ratio}
      })
      return({
        visible: (i > 1) ? false:true,
        name: s.election.text,
        data: parties
      })
    })
    return series
  }

Updating Live Data on LineChart

Hey buddy, thanks for all the awesome work with this project.

Please see the sandbox linked here - CodeSandbox.io

I am trying to update data to show a series of updated points on a chart. The similar code works on a pure HighChart js control, however I think something funky is happening under the covers when setting the state,

Basically setting new state for the line chart does not update the line chart drawn.

this.setState({ data: this.state.data });

I have also had to initialise the array to have n empty array points at the beginning of the control to correctly show the correct range on the chart before the points start ticking in.

    while (idx < buffersize) {
      data.push([]);
      idx++;
    }

Also can you shed some light on how best to get the Series instance from the controls rendered? Surely there is a better way than traversing a reference like I have shown below:

<HighchartsChart ref={ref => this.chart = ref}>

    if (this.chart) {
      let chart = this.chart.context.Highcharts.charts[0];
      if (chart) {
        chart.series[0].addPoint(this.state.data[this.state.data.length - 1], true, true);
      }
    }

I would like to see the similar output to available on the Live Data demo on the Highcharts website - Dynamic Updates

thanks in advance - I am pretty sure I must be over thinking the solution here.

M@

SeriesProvider don't removes handleSeriesAdded Event when component will unmount

handleSeriesAdded is called after a Series is unmounted, because the registered Event (in providerSeries) isn't removed after the component is unmounted.

Highcharts.addEvent(getChart(), 'addSeries', this.handleSeriesAdded);

This will do the trick:

    componentWillUnmount() {
        const { getChart } = this.props;
        Highcharts.removeEvent(getChart(), 'addSeries', this.handleSeriesAdded);
    }

When not doing this, react will warn you (because you can't set states on unmounted components)

Warning: setState(...): Can only update a mounted or mounting component. 
This usually means you called setState() on an unmounted component. 
This is a no-op. Please check the code for the SeriesProvider(t) component.

How does this library compare to https://github.com/kirjs/react-highcharts?

I'm deciding which one to use. The react-highcharts is obviously more popular, but I'm wondering, @whawker, if you'd describe some reasons to use react-jsx-highcharts over the other? Thank you!

Multiple YAxis rerender issues

I noticed a strange issue this evening when using multiple YAxis in a single chart. Only the first YAxis updates on rerenders triggered by prop updates.

Confirmed this behavior by swapping the order of the YAxis from the image above.

Any ideas?

Thanks!

A question about Reflow()

Hey!
First of, awesome work I really enjoy using your library its been working like a charm!

I am a rather new react user and I wanted to ask how you would handle using highcharts .reflow().
I have a highchart that is hidden under a tab with Display: none.
And when its initially rendered it has no height and width properties, so the chart will get some default value w:777 h:400 f.x.
So I would need to trigger a reflow() after the chart has been renderd. resizing the
page also works to solve this.
I was wondering if you could give some advice how to do that or if there is a super easy way i'm missing?

Thanks in advance and good work!

Just for clarity here is what my container is doing. I'm just passing some props to my highchart component.

            <Tab eventKey={5} title="Throughput">
              Throughput Chart
              <ThroughputChart
                title={data.tank}
                dataPoints={data.throughputChart}
                channelNames={data.channelName}
              />

And my stateless component is just a basic setup

const ThroughputChart = props => (
  <div>
    <HighchartsChart>
      <Chart zoomType='x'/>
      <Legend layout="horizontal" align="center" verticalAlign="bottom" />

      <Title>{props.title}</Title>
      <XAxis id="datetime_troughputchart" type="datetime">
...etc

Allow styled mode (css) for highcharts

From my understanding, right now, react-jsx-highcharts imports the top level 'highcharts'. But as of version 5 there is a styled mode using css for separation of concerns purposes. And as per the highcharts documentation for Style by CSS, you need to load highcharts/js/highcharts.js instead of the top highcharts as you would usually do for the svg styled mode.

Now have I missed something in the configuration or is it actually something that doesn't exist yet?

I don't mind trying to open a PR and try to fix it from my end if you're okay with it.

Properties of <Chart/> not updating when changed

Hi...first, let me say thanks for this project. I was considering doing something like this for Highcharts, because....well...declarative graphs FTW! Now I can just use this and help make it better.

I'm running into an issue here where I want to be able to change thebackgroundColor of the chart (among other things like margins, borders, etc.) The problem is that if I change a prop of the <Chart> component, for example, the backgroundColor, even though the render() function of my component is called with the right color value, the background color of the chart doesn't change. This happens for margins too and I expect other props.

In both cases, the initial value of the prop is respected, so the margins and background color are correct, but later changes are not rendered.

I was able to replicate this in the AddSeries demo by changing one of the buttons to change the backgroundColor in the state. Here is the updated code:

import React, { Component } from 'react'
import Highcharts from 'highcharts'
import { Chart, HighchartsChart, withHighcharts, XAxis, YAxis, Title, Legend, LineSeries } from 'react-jsx-highcharts'
import ExampleCode from '../utils/ExampleCode'
import code from './exampleCode'
import { createRandomData } from '../utils/data-helpers'

class App extends Component {
  constructor(props) {
    super(props)
    this.createRandomSeries = this.createRandomSeries.bind(this)
    this.handleAddSeries = this.handleAddSeries.bind(this)
    this.handleRemoveSeries = this.handleRemoveSeries.bind(this)
    this.renderSeries = this.renderSeries.bind(this)

    const now = Date.now()
    this.state = {
      now,
      series: [
        {
          name: 'Profit',
          data: createRandomData(now, 1e8),
        },
      ],
      seriesCounter: 1,
      color: '#ff0000',
    }
  }

  createRandomSeries(index) {
    return {
      name: `Series${index}`,
      data: createRandomData(this.state.now, 1e8),
    }
  }

  handleAddSeries = e => {
    e.preventDefault()
    this.setState({
      color: this.state.color === '#ff0000' ? '#0000ff' : '#ff0000',
    })
  }

  handleRemoveSeries(e) {
    e.preventDefault()
    const { series } = this.state
    const randomIndex = Math.floor(Math.random() * series.length)
    series.splice(randomIndex, 1)

    this.setState({
      series,
    })
  }

  renderSeries({ name, data }) {
    return <LineSeries id={name} name={name} key={name} data={data} />
  }

  render() {
    return (
      <div className="app">
        <HighchartsChart>
          <Chart backgroundColor={this.state.color} />
          <Title>Dynamically add/remove series</Title>

          <Legend align="left">
            <Legend.Title>Legend</Legend.Title>
          </Legend>

          <XAxis type="datetime">
            <XAxis.Title>Time</XAxis.Title>
          </XAxis>

          <YAxis id="price">
            <YAxis.Title>Price</YAxis.Title>
            {this.state.series.map(this.renderSeries)}
          </YAxis>
        </HighchartsChart>

        <div className="btn-toolbar" role="toolbar">
          <button className="btn btn-primary" onClick={this.handleAddSeries}>
            Toggle Color
          </button>
          <button className="btn btn-danger" onClick={this.handleRemoveSeries}>
            Remove line series
          </button>
        </div>

        <ExampleCode name="AddSeries">{code}</ExampleCode>
      </div>
    )
  }
}

export default withHighcharts(App, Highcharts)

This seems like something that should work, so I'm wondering if I am missing something or if there is a bug.

Thanks!

HighchartsStock with RangeSelector during unmount throws error

First of all, nice job for implementing this great highcharts react component.

I started to follow one of the highstock examples that has range selector; everything works well except when you change the route and component needs to unmount; it throws the following error.
Uncaught TypeError: Cannot read property 'rangeSelector' of undefined
When I remove the range selector everything goes normal.
Anybody has any suggestions?

This is the code.

<HighchartsStockChart>
  <Chart zoomType="x" />

  <Title>Highstocks Example</Title>

  <Legend>
    <Legend.Title>Key</Legend.Title>
  </Legend>

  <RangeSelector>
    <RangeSelector.Button count={1} type="day">1d</RangeSelector.Button>
    <RangeSelector.Button count={7} type="day">7d</RangeSelector.Button>
    <RangeSelector.Button count={1} type="month">1m</RangeSelector.Button>
    <RangeSelector.Button type="all">All</RangeSelector.Button>
  </RangeSelector>

  <Tooltip />

  <XAxis>
    <XAxis.Title>Time</XAxis.Title>
  </XAxis>

  <YAxis id="price">
    <YAxis.Title>Price</YAxis.Title>
    <AreaSplineSeries id="profit" name="Profit" data={data1} />
  </YAxis>

  <YAxis id="social" opposite>
    <YAxis.Title>Social Buzz</YAxis.Title>
    <SplineSeries id="twitter" name="Twitter mentions" data={data2} />
  </YAxis>

  <Navigator>
    <Navigator.Series seriesId="profit" />
    <Navigator.Series seriesId="twitter" />
  </Navigator>
</HighchartsStockChart>

Support colors

Adding colors to plotOptions, or to Chart component as a prop appears to have no effect.

PS still loving this project over that other React Highcharts wrapper :-) I'll try to patch and submit merge requests where I can, but can't see where this would go. Is it here? https://github.com/whawker/react-jsx-highcharts/blob/master/packages/react-jsx-highcharts/src/components/BaseChart/BaseChart.js#L34

Add Highmaps support

Thanks for your great package!

I am doing a project to visualise a big sized dataset with longitudes and latitudes. As there is no example for map-data graphs, is there anybody know how to do the basic configuration? Thank you very much !

Navigator unmount error

When using Navigator in a HighchartsStockChart, as soon as my main component unmounts (like navigating to another page using react router) I get spammed with this error when the mouse moves:

highstock.js:436 Uncaught TypeError: Cannot read property 'normalize' of undefined
at HTMLDocument.a.mouseMoveHandler

If I remove the Navigator component, everything seems to be fine.

Highmaps?

I am trying to use React with Highmaps. Currently using the react-highcharts package but am running into issues when trying to call the build in methods (example. .hide() ) in a method outside the config object.

I want utilize the state constructor in React to update the config object and think your documentation would be the approach I would like to take.

The question is then, does react-jsx-highcharts work with highmaps?

Thank you!

Multiple charts on same page share context

Hello

I am using a layout control where a user can add multiple charts as individual components on a single page. In this case, I would like to interact with the chart instance using the underlying highcharts object so I can call the apis as needed.

(You can see my conversation with highcharts here)

You can see the final solution from their developers was to call drillToNode on the series. However, the navigation path to the series is a bit clunky from the react-jsx-highcharts wrapper - for example:
this.treemapSeries.context.Highcharts.charts[0].series[0].drillToNode(xxx);

However it works, but it fails when we have multiple charts on the screen as the Highcharts object seems to be a singleton and contains all the instances of the chart within the single page application.

See the example below - pressing the button counts the charts attached to both instances of the HighChartsChart element. Sandbox example

I am pretty certain I am accessing the underlying highcharts object from the reference incorrectly, maybe even attaching the reference to the wrong element in the rendered html - however this example nicely shows the problem to obtain the series for a particular chart.

Can you provide an example how to obtain the correct underlying highcharts series object for a chart in a given context?

Thanks in advance

M@

Ideological questions about approach to architecture

Hey Will.

Great idea with this repo and good job getting it out there on npm 👍 ! Legend!

I think that the way you've "reengineered' Highcharts declaratively is clever. I can see that you're building a lightweight chart instance and then adding the nested components (titles, axis, even series) as you move down the DOM tree.

I'm wondering if you had other attempts or thinking to solve this?

A problem (there are a few) with Highcharts is of course that it holds bidirectional state, so the state can get dirty easily. The other thing that has annoyed the shit out of me is the context of scope in events.

I was playing with an ideological idea (which you've inspired me to spike out now! ) of using the declarative DOM instead to effectively map the JSON config. This way, you could supply Highcharts constructor once with a state shape that it needs to render. Subsequent renders would destroy and then create new instance.

I have been wrapping Highcharts with React and writing code like this (which is "reasonable" but feels wrong, but feels better than the giant JSON blob):

<BubbleChart title="Projects by status - Delivery"
                               series={[
                                {x:32.3,y:23.3},
                                {x:8.3,y:79.2},
                                {x:33.3,y:87.3},
                               ]}
                               xAxis={{title:{text:'Percentage completed (%)'}}}
                               yAxis={{title:{text:'Percentage spent (%)'}}} />

It's effectively a 1:1 mapping to the JSON blob. Sigh.

But it could easily look like this and be more Reacty:

<BubbleChart>
            <Title text="Projects by status - Delivery" />
            <Series data={[
              {x:32.3,y:23.3},
              {x:8.3,y:79.2},
              {x:33.3,y:87.3},
            ]} />
            <Yaxis title={{text:'Percentage completed (%)'}} />
            <Xaxis title={{text:'Percentage spent (%)'}} />
          </BubbleChart>

Just wondering about ideological questions around how you came to your solution and what was some of your thinking?

Publish v2.0 to npm

Hey, is version 2.0+ going to be making its way to npm anytime soon? Unfortunately npm install and yarn add do not support multiple packages in a repo, so I couldn't just add the latest version of this library via github directly. Thanks!

Some components using context directly unnecessarily

Use provideChart HOC and this.props.getChart instead

• Debug
• Tooltip
• RangeSelectorButton
• RangeSelector
• Navigator also here

Only last series updates when switching data

I'm trying to update a chart using new data. It contains multiple series---the number varies dynamically.

When I update the data, only the last series is changed. I've tried cloning the data to make sure it's not a "pass by reference" issue, but that doesn't see to change things.

Here's some code that replicates the issue. When the data is toggled, the first two series remain unchanged from their initial values, but the final series toggles.

YAxis numbers sometimes overlap the graph when on the right

When rendering a YAxis on the opposite side (right), sometimes the numbers overlap the graph itself.

Live Example:
https://codesandbox.io/s/zql6o1kzx3

This only seems to happen if the opposite axis is rendered first. If there is a left axis and then an opposite one, it works fine. If there is only one axis, but it is opposite, then it overlaps.

Exporting capabilities?

Is there a way to use highcharts exporting capabilities with this library?
I love the declarative nature of how this library was implemented, so i was hoping that the there is a similar way to implement the chart exporting feature.

RangeSelector.Button error

The RangeSelector.Button component doesn't seem to be working properly. You can actually see an example of the JS error in your demo:

https://whawker.github.io/react-jsx-highcharts/examples/Highstocks/index.html

If you include any kind of RangeSelector.Button in your code like this:

<RangeSelector>
    <RangeSelector.Button></RangeSelector.Button>
</<RangeSelector>

You'll end up with this error:

Uncaught TypeError: Cannot read property 'state' of undefined
    at https://code.highcharts.com/stock/highstock.js:484:470
    at Array.forEach (<anonymous>)
    at a.each (https://code.highcharts.com/stock/highstock.js:28:325)
    at E.updateButtonStates (https://code.highcharts.com/stock/highstock.js:484:70)
    at E.render (https://code.highcharts.com/stock/highstock.js:492:442)
    at a.Chart.<anonymous> (https://code.highcharts.com/stock/highstock.js:499:481)
    at a.Chart.a.(anonymous function) (https://code.highcharts.com/stock/highstock.js:19:186)
    at a.Chart.<anonymous> (https://code.highcharts.com/stock/highstock.js:517:137)
    at a.Chart.a.(anonymous function) [as update] (https://code.highcharts.com/stock/highstock.js:19:186)
    at https://unpkg.com/[email protected]/dist/react-jsx-highstock.min.js:1:11143

My "fix" for the time being is to just pass the buttons in like this:

<RangeSelector buttons={myArrayOfButtonsHere}></<RangeSelector>

Cannot read property 'padding' of undefined

Hello,
First of nice work!
Secondly, I have been trying to implement your example StyleByCSS but I am getting this error:
What am I missing? everything works fine, except tooltip.

main.js:1822 Uncaught TypeError: Cannot read property 'padding' of undefined
    at u.Tooltip.init (main.js:1822)
    at new u.Tooltip (main.js:1822)
    at n.value (adviser.entry.js:60548)
    at CallbackQueue.notifyAll (adviser.entry.js:7138)
    at ReactReconcileTransaction.close (adviser.entry.js:17784)
    at ReactReconcileTransaction.closeAll (adviser.entry.js:7796)
    at ReactReconcileTransaction.perform (adviser.entry.js:7743)
    at ReactUpdatesFlushTransaction.perform (adviser.entry.js:7730)
    at ReactUpdatesFlushTransaction.perform (adviser.entry.js:6898)
    at Object.flushBatchedUpdates (adviser.entry.js:6981)

My code:

    <HighchartsChart plotOptions={plotOptions}>
        <Tooltip
          borderWidth={3}
          shadow={false}
          hideDelay={0}
          padding={8}
          headerFormat={'<b>Something</b>'}
          pointFormat={'{series.name}: <b>{point.percentage:.1f}%</b>'}
          valueSuffix={'%'}
        />
        <PieSeries
            id="my-pie"
            name="Asset Allocation"
            data={chartData.series[0].data}
        />
    </HighchartsChart>

Thanks

Note:
If we pass padding inside style prop, it doesn't crash, but pointFormat, valueSuffix, headerFormatare not set.

<Tooltip
          borderWidth={3}
          shadow={false}
          hideDelay={0}
          padding={8}
          headerFormat={'<b>Something</b>'}
          pointFormat={'{series.name}: <b>{point.percentage:.1f}%</b>'}
          valueSuffix={'%'}
          style={{padding: 8}}
/>

RangeSelector.Input focus

I can't focus (click inside) neither on the examples or my own project's RangeSelector.Input. After some try and failure i figured out that it is possible to click right only in the edges of the inputs, but not on other areas

Cannot read property 'destroy' of undefined

Good job on wrapping HighCharts, it is a pain to work with it otherwise!

I have version 1.3.1, and I get an error even with the simplest example in the demos. It seems that somewhere the chart reference is deleted before the BaseChart component's componentWillUnmount event is called, thus the error.

You can investigate why this occurs, but for now a simple solution is to check the existence of the chart before calling destroy().

So BaseChart.js componentWillUnmount should be

componentWillUnmount () {
   
 if(this.chart){
       this.chart.destroy();
  }
  this.chart.__destroyed = true;
}

This might result in some memory leakage, but it might be a good quick fix for now.

Any difference between ColumnSeries and BarSeries?

While I was trying to create a bar chart thinking it was going to basically be a transposed column chart, I copied the example code for a Combo Chart, removing everything but the column series. I replaced the column series with 'BarSeries' but nothing occurred. After digging through some of the documentation for different charts, I was able to find that adding the "inverted" prop to the Chart component was the only thing that achieved what I was looking for, regardless of if it was BarSeries or ColumnSeries. Maybe I had something wrong? Below is what I used before adding the inverted prop...

import React, { Component } from 'react';
import {
HighchartsChart, Chart, XAxis, YAxis, Title, Legend, BarSeries
} from 'react-jsx-highcharts';

class Bars extends Component {

render() {

    const plotOptions = {
        series: {
            stacking: 'normal'
        }
    }

    return (
        <div className="app">
            <HighchartsChart plotOptions={plotOptions} >
                <Chart />
                <Legend />

                <XAxis id="x" categories={['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']} />

                <YAxis id="number">
                    <BarSeries id="jane" name="Jane" data={[3, 2, 1, 3, 4]} />
                    <BarSeries id="john" name="John" data={[2, 3, 5, 7, 6]} />
                    <BarSeries id="joe" name="Joe" data={[4, 3, 3, 9, 9]} />
                </YAxis>
            </HighchartsChart>
        </div>
    );
}

}

export default Bars;

LineSeries coordinates not updating

I am using a LineSeries to draw a vertical line on a graph using your package:

    <LineSeries
      data={[{x: this.props.x, y: this.props.y_end}, {x: this.props.x, y: this.props.y_start}]}
    />

The size of the line needs to change in response to other variables in the application. Unfortunately it doesn't change when the props update. This seems to have to do with the fact that it's a fixed line with start and end coordinates, as opposed to a normal data-series (e.g. a list of values)

I would appreciate your input.

Dynamically Replacing YAxis throws Highcharts error

First let me say that i think that react-jsx-highcharts is an excellent approach for integrating highcharts in react apps! I would like to try and use it for the projects i am responsible for at work.

I ran into an issue when i tried to dynamically replace y-axis:

<HighchartsChart>
    <Chart/>
    <Title>{title}</Title>
    <Legend layout="vertical" align="right" verticalAlign="middle"/>
    <XAxis type="datetime">
        <XAxis.Title>Time</XAxis.Title>
    </XAxis>
    {selectedTypes.map(type =>
        <YAxis id={`y-axis-${type.id}`}
               key={type.id}>
            <YAxis.Title>{`${type.name} [${type.unit}]`}</YAxis.Title>
            <LineSeries id={`series-${type.id}`}
                          name={type.name}
                          data={this.getSeriesDataByTypeId(type.id)}/>
        </YAxis>
    )}
</HighchartsChart>

This works fine until one of the selectedTypes is removed. The following error is thrown:

highcharts.js:336 Uncaught TypeError: Cannot read property 'options' of undefined
    at L.update (highcharts.js:336)
    at react-jsx-highcharts.js:1021
    at Object.update (react-jsx-highcharts.js:1067)
    at AxisTitle.updateAxisTitle (react-jsx-highcharts.js:3335)
    at AxisTitle.componentWillUnmount (react-jsx-highcharts.js:3324)
    at ReactCompositeComponent.js:408
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:407)
    at Object.unmountComponent (ReactReconciler.js:78)
    at ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:417)

Is removing y-axis not supported or am i doing something wrong?

AxisProvider method removePlotLine won't remove the plot line

After analysing the problem why removePlotLine in Component PlotLine.componentWillUnmount won't kick in is that the argument (id) won't be passed to highcharts in "raw" format.

I've traced this code:
this.props.removePlotLine("SomeID");

and landed in the raw function removePlotBandOrLine in highcarts. What I saw is, that the argument, which is passed though the boundContextHelper, seems to be messy:

removePlotBandOrLine({ 0: "SomeID" })

What I've expected is just:

removePlotBandOrLine("SomeID")

This is happening because removeProviderProps in the cleanPropsBeforeUpdate.js expects an object, which is not given in this method thus return omit(config, getProvidedProps()); turns the config, which needs to be flat, into an object.

After removing the wrapper function cleanPropsBeforeUpdate from the AxisProvider for the removePlotLine method, removing a plot line works like a charm, but I don't think this is a perfect solution (There is surely a good reason, why you guys wrapped the remove methods with cleanPropsBeforeUpdate) due it seems to be a general problem (same applies to removePlotBand).

Maybe the function removeProviderProps (or cleanPropsBeforeUpdate) needs to be modified properly.

In fact, Ive tried just for fun to pass multiple arguments to native highcharts methods by using getBoundAxisMethod which results in passing only the first argument (depending on whether I am wrapping the method with cleanPropsBeforeUpdate which indeed passes multiple arguments as an object like described above)

I've posted a quick dirty solution to fix this bug in #16

Gonna post a little snippet how to reproduce the problem.

YAxis shows no numbers when Series is wrapped in a div

If you create a hierarchy that has a two YAxis objects, each with a Series as a child, but the Series objects are actually wrapped in a <div>, then the range of the second YAxis is not shown.

          <YAxis id="price">
            <YAxis.Title>Price</YAxis.Title>
            <AreaSplineSeries id="profit" name="Profit" data={data1} />
          </YAxis>

          <YAxis id="social" opposite>
            <YAxis.Title>Social Buzz</YAxis.Title>
            <div>
              <SplineSeries id="twitter" name="Twitter mentions" data={data2} />
            </div>
          </YAxis>

Live Example:
https://codesandbox.io/s/p3xrwv36m0

Notice that the Social Buzz axis has no numbers.

Remove the <div> around the the Series and it works.

In my case, this is happening because I am returning one or more Series objects from an intermediate component that is a child of the YAxis, and since React 15 can't return an array, I wrapped the Series objects in a <div>.

I suspect that this won't be a problem if I upgrade to React 16, but that will require bit of work in my app.

Is there any way to make this work with the intermediate <div>?

Feature request: Add drilldown

Would be great to see drilldown as part of this library:
https://www.highcharts.com/docs/chart-concepts/drilldown

Include documentation

I think you should merge the /examples to master as it's acting as documentation, such as #1.
If the reason you haven't done this is because you don't want them to be published to npm, why not add a .npmignore file and list /examples in it? As well, you could add /dist to the .gitignore

Cannot read property 'chart' of undefined when upgrading to 2.0.0

I'd upgraded from 1.4.0 to 2.0.0 and have the error:

Cannot read property 'chart' of undefined

I've returned to 1.4.0 and it works.

Happy to poke around some more, but I'm having difficulty recreating it as a standalone test. If someone can orient me, happy to dig around. The stack trace didn't help me. Here it is:

react-jsx-highcharts.min.js:1 Uncaught TypeError: Cannot read property 'chart' of undefined
    at n.value (react-jsx-highcharts.min.js:1)
    at finishClassComponent (react-dom.development.js:10249)
    at updateClassComponent (react-dom.development.js:10226)
    at beginWork (react-dom.development.js:10605)
    at performUnitOfWork (react-dom.development.js:12573)
    at workLoop (react-dom.development.js:12682)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at performWork (react-dom.development.js:12800)
    at batchedUpdates (react-dom.development.js:13244)
    at performFiberBatchedUpdates (react-dom.development.js:1646)
    at stackBatchedUpdates (react-dom.development.js:1637)
    at batchedUpdates (react-dom.development.js:1651)
    at Object.batchedUpdatesWithControlledComponents [as batchedUpdates] (react-dom.development.js:1664)
    at dispatchEvent (react-dom.development.js:1874)
value @ react-jsx-highcharts.min.js:1
finishClassComponent @ react-dom.development.js:10249
updateClassComponent @ react-dom.development.js:10226
beginWork @ react-dom.development.js:10605
performUnitOfWork @ react-dom.development.js:12573
workLoop @ react-dom.development.js:12682
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
batchedUpdates @ react-dom.development.js:13244
performFiberBatchedUpdates @ react-dom.development.js:1646
stackBatchedUpdates @ react-dom.development.js:1637
batchedUpdates @ react-dom.development.js:1651
batchedUpdatesWithControlledComponents @ react-dom.development.js:1664
dispatchEvent @ react-dom.development.js:1874
proxyConsole.js:54 The above error occurred in the <n> component:
    in n (created by HighchartsProvider(n))
    in HighchartsProvider(n) (at ResultsChart.js:15)

Labels support

Hi,

thank you for your awesome job. I wonder is it possible to use highcharts labels ("https://code.highcharts.com/modules/series-label.js") with react-jsx-highcarts ? If you'll look at the simple example on highcharts site and your example they are the same except for the labels for line graphs.

Can't remove tick marks on X-Axis

I would like to make the X-Axis on a Lien graph invisible. I have managed to remove everything except the tick marks (ignore the blue container div border underneath)

My XAxis is defined as follows:

  <XAxis
    gridLineWidth='0'
    labels='None'
    lineWidth='0'
    minorTickLength='0'
    tickLength='0'
  />

Normally in HighCharts this would result in the whole axis disappearing. Any help appreciated.

Crash when toggling a second (opposite) Y-Axis

I have a second Y-Axis that I toggle on and off. After two cycles (on/off/on/off), I get a crash---every time (i.e. perfectly repeatable).

The problem seems to be with the <YAxis.Title/> component in the secondary series. If I remove that, it all works fine.

I've created a minimal App component that recreates the issue.

• [email protected]

• [email protected]

    import React, {Component} from 'react';
    import highcharts from 'highcharts';
    import { HighchartsChart, Chart, XAxis, YAxis, LineSeries, withHighcharts } from 'react-jsx-highcharts';
  
    class App extends Component {
        constructor(props) {
            super(props);
  
            this.state = {
                showSecondarySeries: false
            };
        }
  
        render() {
            return (
                <div style={{ margin: 20 }}>
                    <div style={{ marginBottom: 20 }}>
                        <button onClick={() => this.setState({
                            showSecondarySeries: !this.state.showSecondarySeries
                        })}>Toggle data</button>
                    </div>
  
                    <HighchartsChart>
                        <Chart/>
  
                        <XAxis/>
  
                        <YAxis id="yAxisPrimary">
                            <YAxis.Title>Primary</YAxis.Title>
                            <LineSeries id='primary' data={[ 1, 2, 3, 4, 5 ]}/>
                        </YAxis>
  
                        {this.state.showSecondarySeries
                            ?
                                <YAxis id="yAxisSecondary" opposite>
                                    <YAxis.Title opposite>Secondary</YAxis.Title>
                                    <LineSeries id='secondary' data={[ 5, 4, 3, 2, 1 ]}/>
                                </YAxis>
                            : undefined}
                    </HighchartsChart>
                </div>
            );
        }
    }
  
    export default withHighcharts(App, highcharts);
  

Stack trace is:

highcharts.js:317 Uncaught TypeError: Cannot read property 'options' of undefined
    at H.update (highcharts.js:317)
    at react-jsx-highcharts.min.js:1
    at Object.update (react-jsx-highcharts.min.js:1)
    at n.value (react-jsx-highcharts.min.js:1)
    at n.value (react-jsx-highcharts.min.js:1)
    at callComponentWillUnmountWithTimerInDev (react-dom.development.js:11117)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at safelyCallComponentWillUnmount (react-dom.development.js:11125)
    at commitUnmount (react-dom.development.js:11415)
    at unmountHostComponents (react-dom.development.js:11356)
    at commitDeletion (react-dom.development.js:11386)
    at commitAllHostEffects (react-dom.development.js:12271)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at commitAllWork (react-dom.development.js:12376)
    at workLoop (react-dom.development.js:12687)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at performWork (react-dom.development.js:12800)
    at batchedUpdates (react-dom.development.js:13244)
    at performFiberBatchedUpdates (react-dom.development.js:1646)
    at stackBatchedUpdates (react-dom.development.js:1637)
    at batchedUpdates (react-dom.development.js:1651)
    at Object.batchedUpdatesWithControlledComponents [as batchedUpdates] (react-dom.development.js:1664)
    at dispatchEvent (react-dom.development.js:1874)
update @ highcharts.js:317
(anonymous) @ react-jsx-highcharts.min.js:1
(anonymous) @ react-jsx-highcharts.min.js:1
value @ react-jsx-highcharts.min.js:1
value @ react-jsx-highcharts.min.js:1
callComponentWillUnmountWithTimerInDev @ react-dom.development.js:11117
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
safelyCallComponentWillUnmount @ react-dom.development.js:11125
commitUnmount @ react-dom.development.js:11415
unmountHostComponents @ react-dom.development.js:11356
commitDeletion @ react-dom.development.js:11386
commitAllHostEffects @ react-dom.development.js:12271
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
commitAllWork @ react-dom.development.js:12376
workLoop @ react-dom.development.js:12687
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
batchedUpdates @ react-dom.development.js:13244
performFiberBatchedUpdates @ react-dom.development.js:1646
stackBatchedUpdates @ react-dom.development.js:1637
batchedUpdates @ react-dom.development.js:1651
batchedUpdatesWithControlledComponents @ react-dom.development.js:1664
dispatchEvent @ react-dom.development.js:1874
proxyConsole.js:54 The above error occurred in the <n> component:
    in n (created by AxisProvider(n))
    in AxisProvider(n) (created by ChartProvider(AxisProvider(n)))
    in ChartProvider(AxisProvider(n)) (created by HighchartsProvider(ChartProvider(AxisProvider(n))))
    in HighchartsProvider(ChartProvider(AxisProvider(n))) (at App.js:36)
    in n (created by n)
    in n (created by AxisProvider(n))
    in AxisProvider(n) (created by ChartProvider(AxisProvider(n)))
    in ChartProvider(AxisProvider(n)) (created by HighchartsProvider(ChartProvider(AxisProvider(n))))
    in HighchartsProvider(ChartProvider(AxisProvider(n))) (created by n)
    in n (at App.js:35)
    in div (created by n)
    in n (created by n)
    in n (created by HighchartsProvider(n))
    in HighchartsProvider(n) (at App.js:23)
    in div (at App.js:16)
    in App (created by withHighcharts(App))
    in withHighcharts(App) (at index.js:6)

Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at https://fb.me/react-error-boundaries.
__stack_frame_overlay_proxy_console__ @ proxyConsole.js:54
logCapturedError$1 @ react-dom.development.js:8305
captureError @ react-dom.development.js:12993
safelyCallComponentWillUnmount @ react-dom.development.js:11128
commitUnmount @ react-dom.development.js:11415
unmountHostComponents @ react-dom.development.js:11356
commitDeletion @ react-dom.development.js:11386
commitAllHostEffects @ react-dom.development.js:12271
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
commitAllWork @ react-dom.development.js:12376
workLoop @ react-dom.development.js:12687
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
batchedUpdates @ react-dom.development.js:13244
performFiberBatchedUpdates @ react-dom.development.js:1646
stackBatchedUpdates @ react-dom.development.js:1637
batchedUpdates @ react-dom.development.js:1651
batchedUpdatesWithControlledComponents @ react-dom.development.js:1664
dispatchEvent @ react-dom.development.js:1874
highcharts.js:317 Uncaught TypeError: Cannot read property 'options' of undefined
    at H.update (highcharts.js:317)
    at react-jsx-highcharts.min.js:1
    at Object.update (react-jsx-highcharts.min.js:1)
    at n.value (react-jsx-highcharts.min.js:1)
    at n.value (react-jsx-highcharts.min.js:1)
    at callComponentWillUnmountWithTimerInDev (react-dom.development.js:11117)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at safelyCallComponentWillUnmount (react-dom.development.js:11125)
    at commitUnmount (react-dom.development.js:11415)
    at unmountHostComponents (react-dom.development.js:11356)
    at commitDeletion (react-dom.development.js:11386)
    at commitAllHostEffects (react-dom.development.js:12271)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at commitAllWork (react-dom.development.js:12376)
    at workLoop (react-dom.development.js:12687)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at performWork (react-dom.development.js:12800)
    at batchedUpdates (react-dom.development.js:13244)
    at performFiberBatchedUpdates (react-dom.development.js:1646)
    at stackBatchedUpdates (react-dom.development.js:1637)
    at batchedUpdates (react-dom.development.js:1651)
    at Object.batchedUpdatesWithControlledComponents [as batchedUpdates] (react-dom.development.js:1664)
    at dispatchEvent (react-dom.development.js:1874)
update @ highcharts.js:317
(anonymous) @ react-jsx-highcharts.min.js:1
(anonymous) @ react-jsx-highcharts.min.js:1
value @ react-jsx-highcharts.min.js:1
value @ react-jsx-highcharts.min.js:1
callComponentWillUnmountWithTimerInDev @ react-dom.development.js:11117
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
safelyCallComponentWillUnmount @ react-dom.development.js:11125
commitUnmount @ react-dom.development.js:11415
unmountHostComponents @ react-dom.development.js:11356
commitDeletion @ react-dom.development.js:11386
commitAllHostEffects @ react-dom.development.js:12271
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
commitAllWork @ react-dom.development.js:12376
workLoop @ react-dom.development.js:12687
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
batchedUpdates @ react-dom.development.js:13244
performFiberBatchedUpdates @ react-dom.development.js:1646
stackBatchedUpdates @ react-dom.development.js:1637
batchedUpdates @ react-dom.development.js:1651
batchedUpdatesWithControlledComponents @ react-dom.development.js:1664
dispatchEvent @ react-dom.development.js:1874

Highcharts Error #18

Hi, so im getting this error when im trying the code for highstock here
the error is
Highcharts Error #18
The requested axis does not exist
This error happens when you set a series' xAxis or yAxis property to point to an axis that does not exist.

here is my component :

import React, { Component } from "react";
import Highcharts from "highcharts/highstock";
import {
  HighchartsStockChart,
  Chart,
  withHighcharts,
  XAxis,
  YAxis,
  Title,
  Legend,
  AreaSplineSeries,
  SplineSeries,
  Navigator,
  RangeSelector,
  Tooltip
} from "react-jsx-highstock";
import { createRandomData } from "../utils/data-helpers";


class DemoChart extends Component {
  constructor(props) {
    super(props);

    const now = Date.now();
    this.state = {
      data1: createRandomData(now, 1e8),
      data2: createRandomData(now, 1e8)
    };
  }

  render() {
    return (
      <div>
        <HighchartsStockChart>
            <Chart zoomType="x" />
            <Title>First HighStock</Title>

            <Legend>
                <Legend.Title>Legend Title</Legend.Title>
            </Legend>

            <RangeSelector>
                <RangeSelector.Button count={1} type="day" >1d</RangeSelector.Button>
            </RangeSelector>

            <Tooltip />

            <XAxis>
                <XAxis.Title>XAxis Title</XAxis.Title>
            </XAxis>
            <YAxis id="price" >
                <YAxis.Title>Price</YAxis.Title>
                <SplineSeries id="profit" name="Profit" data={this.state.data1} />
            </YAxis>

            <Navigator>
                <Navigator.Series seriesId="profit" />
            </Navigator>
        </HighchartsStockChart>
      </div>
    );
  }
}

export default withHighcharts(DemoChart, Highcharts);

https://jsfiddle.net/gmw3odsq/
im fearly new to HighChart. thanks for the help

File missing in npm package: src/components/withHighcharts.js

NPM package does not match git repo
Assuming nothing is rendering because of the missing withHighcharts( App, Highcharts ); line causing an Error: withHighcharts is not a function

"Cannot read property 'hoverSeries' of undefined" error when switching series types

I'm trying to switch between line and column displays dynamically, but I get the following error when switching

Cannot read property 'hoverSeries' of undefined

I've created a minimal component that replicates the problem---checkbox that toggles the series. When I make the first switch, the series colour disappears, so something's presumably wrong at that point. Then, when I switch back, I get the error.

I'm using React 16.0, Highcharts 5.0.14 and React JSX Highcharts 1.3.4.

import React, { Component } from 'react';
import { HighchartsChart, Chart, XAxis, YAxis, LineSeries, ColumnSeries } from 'react-jsx-highcharts';

const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            lineChart: true
        };
    }

    getSeries = () =>
        this.state.lineChart
            ? <LineSeries id='series1' data={[...data]}/>
            : <ColumnSeries id='series1' data={[...data]}/>;

    render() {
        return (
            <div>
                Line chart
                <input type='checkbox'
                       checked={this.state.lineChart}
                       onChange={event => { this.setState({ lineChart: event.target.checked}); }}/>

                <HighchartsChart>
                    <Chart/>

                    <XAxis />

                    <YAxis id="axis1">
                        {this.getSeries()}
                    </YAxis>
                </HighchartsChart>
            </div>
        );
    }
}

export default App;

BubbleSeries not working

Hi @whawker ,

I am working with Bubble series and its not generating the chart. If I change the series type to any other type(E.g. Scatter), it works fine. I am not sure if I am passing the data correctly or its some other issue. Please help.

This is the below code:

import React, { Component } from 'react';
import {
  HighchartsChart, Chart, XAxis, YAxis,  Tooltip, Legend, BubbleSeries, ScatterSeries
} from 'react-jsx-highcharts';

class CompetitiveLandscape extends Component {
  render() {
    const plotOptions = {
    };
    const data = [
       [154, 97, 100]
     ];

    return (
      <div className="chartApp">
        <HighchartsChart plotOptions={plotOptions}>
          <Chart zoomType="xy"  />
          <XAxis name="Month">
            <XAxis.Title>Year-Month</XAxis.Title>
          </XAxis>
          <YAxis id="number">
            <YAxis.Title>Basic VS. Premium</YAxis.Title>
            <BubbleSeries id="Premium" name="Premium" color="#e96c39" data={data} />
          </YAxis>
          <Legend />
          <Tooltip backgroundColor="white" shadow={false}></Tooltip>
        </HighchartsChart>
      </div>
    );
  }
}

export default CompetitiveLandscape;

Series props not working

Hi,

I'm new to highcharts and your library so I found it's really hard to understand what's going on. There are a lot of Highcharts api I tried to use in the react component, however, nothing is working. Please let me how to work with Highchart Api, thanks! For example, I want to add tooltip to the series, but it doesn't work, I want to change the series' color into red, it doesn't work either.

import React, { Component } from 'react';
import Highcharts from 'highcharts';
import {
  HighchartsChart, Series, XAxis, YAxis, Title
} from 'react-jsx-highcharts';

require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);

class GaugeChart extends Component {

    render() {
        const plotOptions = {
            solidgauge: {
                dataLabels: {
                    y: 5,
                    borderWidth: 1,
                    useHTML: true,
                    backgroundColor: 'lightblue',
                    color: 'navy'
                },
                lineWidth: 20,
                allowPointSelect: true,
                visible: false
            },
            series: {
                lineWidth: 20
            }
        }

        const YAxisTitleOption = {
            text: "Speedometer",
            useHTML:true,
            margin:100,
            x: 0,
            y: -60
        }

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

        const toolTip = {valueSuffix: ' km/h'}

    return (
        <div className="app">
            <HighchartsChart chart={{ type: 'solidgauge' }} plotOptions={plotOptions} pane={paneOptions} width={300}>
                <Title>LIVE TRAFFIC SPEED</Title>
                <XAxis />
                <YAxis
                id="myAxis"
                title={YAxisTitleOption}
                min={0}
                max={180}
                lineWidth={0}
                minorTickInterval={null}
                tickAmount={6}
                labels={{ y: 16 }}>
                    <Series
                    color="red"
                    dashStyle="Dash"
                    id="gauge-test"
                    name='Speed'
                    data={[90]}
                    lineWidth={20}
                    type="solidgauge"
                    linkedTo="www.facebook.com"
                    tooltip={toolTip} />
                </YAxis>
            </HighchartsChart>
        </div>
    );
    }
}

export default GaugeChart;

onLoad on the Chart component doesn't work

Hi!

First of all, thank you for your nice library!

I have found an issue which is that the load event doesn't seem to work, here is a minimal example: https://codesandbox.io/s/qxn6z5r589
I have copied an example from the documentation and used the onLoad and onRender callback on the Chart component. If you open the DevTools you'll notice that the render even is triggered but the load event is not.

Maybe there is something I didn't understand but this example should work (here is a pure highcharts example).

Can you have a look?

Thank you!

Is the highstock-release dependency necessary for Simple highcharts?

@whawker Do we need to have highstock for absolutely everything?

I feel it is better to allow simple highcharts to be rendered without highstock. This is because for commercial uses a developer may not have license to highstocks, even though they have purchased a highcharts license.

Support for Gauge charts

Thanks for the work on this, super useful library.

Quick question however, is there support for highcharts-more? I can't seem to get any of the charts provided there working with this.

Tooltip formatter scope

Hey again,

Is there a recommended way to use the tooltip for correct access to the chart scope? The scope of this is redefined to the parent in my experiments and therefore I'm not able to make use of custom tooltip formatting.

Thanks!

BarSeries not working as bar, instead shows column

Hi,

I am trying to work with BarSeries, but its showing columns instead. What could be the possible error?

Progress Bar

Hi @whawker ,
I am trying to create a progress bar with the BarSeries.

I am referring to this(https://jsfiddle.net/huphtur/cm6dmoga/) example to create progress bar. Not sure where I am going wrong. Can you help please?

I am open to some other solution also. Just need to a progress bar.

Below is the code I am working on:

import React, { Component } from 'react';
import {
  HighchartsChart, Chart, XAxis, YAxis, Tooltip, BarSeries
} from 'react-jsx-highcharts';


class BasicVsPremiumPB extends Component {
  render() {
    const plotOptions = {
      series:[{
      grouping: false,
      animation: false,
      enableMouseTracking: false,
      showInLegend: false,
      color: 'red',
      pointWidth: 25,
      dataLabels: {
        className: 'highlight',
        format: '150 / 600',
        enabled: true,
        align: 'right',
        style: {
          color: 'white',
          textOutline: false,
        }
      }
    },
    {
      enableMouseTracking: false,
      data: [25],
      color: 'navy',
      borderWidth: 0,
      pointWidth: 25,
      animation: {
        duration: 250,
      }
    }]
  };
    return (
      <div className="chartApp">
        <HighchartsChart plotOptions={plotOptions}>
          <Chart inverted height="70"/>
          <XAxis  name="Month"></XAxis>
          <YAxis id="number" >
            <BarSeries id="Benefits" name="Benefits" data={[25]} />
            {/* <BarSeries id="Benefits" name="Benefits" data={[100]} /> */}
          </YAxis>

          <Tooltip shared backgroundColor="white" shadow={false}></Tooltip>
        </HighchartsChart>
      </div>
    );
  }
}

export default BasicVsPremiumPB;

PlotLine values not updating, PropTypes wrong

For some reason, PlotLine values are not updating. Maybe I am missing a point, but It seems
that PlotLine needs to provide componentDidUpdate.

My solution was to add following code:

  componentDidUpdate (prevProps) {
        this.props.removePlotLine(prevProps.id);
        const { axisId, dimension, ...rest } = this.props;
        this.props.addPlotLine(rest);
    }

Because of the other bug I've reported, this solution will not fix the problems, because this.props.removePlotLine won't pass the id to highcharts (Described in: #15)

The PropTypes seems to be copied from PlotBand. This means value property is not existing in PlotLine but from and to.

My quick solution for BOTH bugs (#16, #15) is extending the PlotLine Component and provide some additional functionalities for removing the plot line (this is a dirty hack):

import { PlotLine as OrignalPlotLine } from 'react-jsx-highcharts';
import PropTypes from 'prop-types';
import boundContextHelper from 'react-jsx-highcharts/src/utils/boundContextHelper';

class PlotLine extends OrignalPlotLine {
    static propTypes = {
        id: PropTypes.string.isRequired,
        axisId: PropTypes.string, // Provided by Axis component
        dimension: PropTypes.string, // Provided by Axis component
        value: PropTypes.number.isRequired,
        xAxis: PropTypes.string,
        yAxis: PropTypes.string,
        color: PropTypes.string,
        addPlotLine: PropTypes.func, // Provided by AxisProvider
        removePlotLine: PropTypes.func // Provided by AxisProvider
    };

    constructor(props) {
        super(props);

        const id = props.axisId || props.id;
        if (!id) return null;

        const axis = props.get(id);

        const getBoundAxisMethod = boundContextHelper(props.getChart(), axis);
        const removePlotLine = getBoundAxisMethod(axis && axis.removePlotLine);

        this.removePlotLineFixed = removePlotLine;
    }

    componentWillUnmount () {
        this.removePlotLineFixed(this.props.id);
    }

    componentDidUpdate (prevProps) {
        this.removePlotLineFixed(prevProps.id);
        const { ...rest } = this.props;
        this.props.addPlotLine(rest);
    }
}

export default PlotLine;

Gonna post a little snippet asap how to reproduce the problem.