Comments (17)
@lmaccherone and anyone else who comes along later -- this seems to work (with webpack, at least):
import ReactHighcharts from 'react-highcharts/dist/bundle/highcharts'
import HighchartsMore from 'highcharts-more'
HighchartsMore(Highcharts)
Using the ReactHighcharts bundle automatically adds Highcharts.
from react-highcharts.
For what it's worth, this solution works for me:
HighchartsMore = require('highcharts-more')(ReactHighcharts.Highcharts)
from react-highcharts.
I knew as soon as I asked, I would figure it out. This worked for me:
import ReactHighcharts from 'react-highcharts/bundle/highcharts';
import 'highcharts-exporting';
import 'highcharts-more';
It meant that I had to separately npm install
highcharts-exporting and highcharts-more
from react-highcharts.
Hey I have a similar problem. I want to use highcharts-more
to display solidgauge
graph.
If I separately install highcharts-exporting
and highcharts-more
and import it like @lmaccherone I get error: HighchartsAdapter is not defined
.
What is the preffered way to get the highcharts-more
working. Thanks
from react-highcharts.
Are you sure you're using the latest version of highcharts?
from react-highcharts.
@martin-svk, did you try npm install highcharts-exporting
and npm install highcharts-more
and use the imports I show above?
from react-highcharts.
@kirjs Yes I think I am. (version 4.2.1). But I am importing the bundled highcharts
in react-highcharts
.
I also tried to import highcharts
separetaly from react-highcharts
like this:
import Highcharts from 'highcharts';
import ReactHighcharts from 'react-highcharts';
but got Highcharts is not bundled by default. use "react-highcharts/dist/bundle/highcharts" instead, or include highcharts.
error.
@lmaccherone Yes, I did exactly this:
import ReactHighcharts from 'react-highcharts/bundle/highcharts';
import 'highcharts-exporting';
import 'highcharts-more';
and got HighchartsAdapter is not defined
error.
from react-highcharts.
What if you try using non-bundled version?
from react-highcharts.
@kirjs As I wrote, I tried to use non-bundled Highcharts
:
import Highcharts from 'highcharts';
import ReactHighcharts from 'react-highcharts';
but got Highcharts is not bundled by default. use "react-highcharts/dist/bundle/highcharts" instead, or include highcharts.
error.
from react-highcharts.
ReachHighcharts expects global Highcharts variable, can you try setting it explicitly?
from react-highcharts.
Hi, it seems to not work with ES6 import
but I managed to get rid of Highcharts is not bundled by default...
message with this:
global.Highcharts = require('highcharts');
const ReactHighcharts = require('react-highcharts'); // This works
For information, I can't even combine the imports like this:
global.Highcharts = require('highcharts');
import ReactHighcharts from 'react-highcharts'; // This does not work
But that still does not solve my problem (which is to import highcharts-more
to be able to use solidgauge
graph). I tried:
global.Highcharts = require('highcharts');
global.HighchartsMore = require('highcharts-more');
const ReactHighcharts = require('react-highcharts');
Which don't produce any error but still throwing The requested series type does not exist
Highcharts error 17. Then I tried also require highcharts-exporing
:
global.Highcharts = require('highcharts');
global.HighchartsMore = require('highcharts-more');
global.HighchartsExporting = require('highcharts-exporting');
const ReactHighcharts = require('react-highcharts');
But that fails with HighchartsAdapter is not defined
error.
from react-highcharts.
This seems to be more about the modules, I created an issue in another repository: kirjs/publish-highcharts-modules#3
from react-highcharts.
Thanks John. This is working for me:
ReactHighcharts = require('react-highcharts/bundle/highcharts')
require('highcharts-exporting')
require('highcharts-more')
On Mon, Jan 25, 2016 at 1:48 PM John Reuning [email protected]
wrote:
@lmaccherone https://github.com/lmaccherone and anyone else who comes
along later -- this seems to work (with webpack, at least):import ReactHighcharts from 'react-highcharts/dist/bundle/highcharts'import HighchartsMore from 'highcharts-more'HighchartsMore(Highcharts)
Using the ReactHighcharts bundle automatically adds Highcharts.
—
Reply to this email directly or view it on GitHub
#72 (comment)
.
from react-highcharts.
For what it's worth, this solution works for me:
HighchartsMore = require('highcharts-more')(ReactHighcharts.Highcharts)
Thank you for this answer. It worked for me, too.
from react-highcharts.
Here's a VERY clear example of a fully working react app and highcharts-more integration into a component 🎉 🔥 💯 https://kirjs.github.io/react-highcharts/more.html
from react-highcharts.
Has anyone been able to implement highcharts-more into react-native?
from react-highcharts.
import * as ReactHighcharts from "react-highcharts"; <br/> import * as HighchartsMore from "highcharts/highcharts-more"; <br/> HighchartsMore(ReactHighcharts.Highcharts);
this way worked for me
from react-highcharts.
Related Issues (20)
- Questions about copyright HOT 1
- [Bug]: multi-data & category => xAxis is dislocation HOT 1
- Update an issue template to use stackblitz for an example HOT 1
- Update all the dependencies HOT 2
- Highcharts export functionality HOT 1
- react 16.8 hooks addPlotLine not work?
- Why opposite:true doesn't work in ReactHighstock?
- Demo project doesn't work.
- outside: true on Tooltip - Error when trying to trigger the tooltip manually
- Upgrade Highcharts - Cross Site Scripting vuln HOT 3
- HighCharts events not getting triggered
- Tooltip.positioner function not working
- cannot use boost HOT 1
- Chart not resizing with container
- All Bars are starting from 0 value in Stacked bar when render happens
- npm vulnerability issue Cross-site Scripting (XSS), need to upgrade highcharts dependency
- Cannot read property 'series' of undefined
- Wrong ordering with temporal data
- Can we do reset on navigator when we switch between custom zoom buttons.
- Incorrect Date Display on Highchart ReactHighstock X-Axis.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-highcharts.