Allow styled mode (css) for highcharts

[xldh]

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.

[whawker]

Interesting, I assume that means we would lose the automatic theming?

My only concern would be is if 'highcharts/js/highcharts' plays nicely with Webpack aliasing, that we use for the highstock package.

Would love it if you could make a PR so I could give it a test.

[xldh]

Cheers for the swift answer.
It could also be done in a more explicit way by creating a separate component.
For instance instead of using HighchartsChart, we'd have HighchartsChartCSS (there might be a better name for it).

It wouldn't be that bad of a design choice if we consider that it actually is a different Highcharts script being loaded anyway.

What do you think?
In any case I'm gonna try to make it work in a fork and keep you up to date. I'll also have a look at Webpack aliasing.

[xldh]

HighchartsCSSChart would be a better name

[xldh]

@whawker Hi! So I found it easier to tweak the config rather than providing a component, since other components were importing highcharts.

I guess that means a new module could be produced from this - react-jsx-highcharts-styled?

[xldh]

This might also just be considered a proof of concept and be implemented totally differently, I'm really not sure what would be best tbh.

[xldh]

@whawker on my end I have to use it in a hurry, so I'm gonna create an npm package with an explicit name to show that it is a temporary package, and unpublish it when this will be sorted.

Let me know if it is a problem for you, I don't want to make it awkward and will respect whatever you say about that.

Cheers.

[whawker]

Fair enough, I've been mulling it over too. Wondering if we should inject the Highcharts global as a prop to the root component (with a shouldComponentUpdate() => false). Then we could provide the Highcharts global via context to the sub components that require it.

That way people can inject whatever Highcharts global they want, whether it be Highcharts/Highcharts style by CSS/Highstock/etc, or even a modified version of Highcharts, as appropriate for their use case.

Needs more thought though I think.

[xldh]

I think being able to inject Highcharts would save a lot of unnecessary pain indeed

[whawker]

So I've been exploring options, I think this is my favourite. Any thoughts?

Basically using a HOC withHighcharts to inject the global. Kind of like how withRouter/injectIntl works with React Router/React Intl.

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


class SimpleChart extends Component {
  render() {
    return (
      <HighchartsChart>
        <Chart />

        <Title>My Title</Title>

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

        <YAxis id="frequency">
          <YAxis.Title>Frequency</YAxis.Title>
          <LineSeries id="my-series" data={[43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]} />
        </YAxis>
      </HighchartsChart>
    );
  }
}

export default withHighcharts(SimpleChart, Highcharts);

[xldh]

+1 Simple and solves the problem.

[whawker]

I know I've been quiet on this for quite a while now, but just wanted to give you an update. It took me a while to get the tests working.

Pretty sure everything is working with this new pattern (see the v2 branch), if you want to take a look, let me know what you think.

[anajavi]

I tried v2 branch using withHighcharts. Works nicely with styled mode.

Thank you for making this library, it is extremely nice and saves a lot of time working with Highcharts.

[xldh]

It's working but I struggled for a long time before understanding that YAxis is now supposed to be a sibling of LineSeries and not a parentNode anymore.. or did I miss something?

Anyways, brilliant work man can't wait for the npm package to be updated.

[whawker]

That wasn't intentional if that is the case! 😟 I'll look into it.

I haven't changed any of the examples other than the addition of withHighcharts.

Would it help if I published a beta package, rather than requiring you to build from source?

[xldh]

Thanks! Yes I had a look at the examples as well, but just the source didn't actually tried to run them...

Also that would be great, yes! It would allow me to push my changes on the project using it!

[whawker]

Ok, I've just published

• react-jsx-highcharts@2.0.0-beta.1
• react-jsx-highstock@2.0.0-beta.1

Could you let me know if you see the same issue?

[xldh]

Thanks a mil'!
Yes it takes more time than I would have thought, so just to let you know - I'm working on it :)

[xldh]

It's working great, no breaking changes from what I see, I don't know what I did... but all's well. Just tested with react-jsx-highcharts

[whawker]

That's a relief!

Just so you know, I'm toying around with being able to pass extra options as an optional third argument to withHighcharts() as I think that will help with Highcharts 6.0 support. But hopefully should publish 2.0.0 as stable within the next few days.

[whawker]

Just published version 2! So this is now officially supported!

See the example

[xldh]

Brilliant!