kirjs / react-highcharts Goto Github PK
View Code? Open in Web Editor NEWReact wrapper for Highcharts library
Home Page: http://kirjs.github.io/react-highcharts/
License: MIT License
React wrapper for Highcharts library
Home Page: http://kirjs.github.io/react-highcharts/
License: MIT License
Related with #8
Now that React 0.14 is the main release, the DOM node refs can be accessed with the DOM component. blog patch
Just replace renderTo: this.refs.chart.getDOMNode()
for renderTo: this.refs.chart
in chartsFactory.jsx:23
:)
When I add import of bundled react-highchart, like this:
import Highcharts from 'react-highcharts/dist/bundle/highcharts';
I receive following error in chrome's console:
Uncaught TypeError: Cannot set property 'HighchartsAdapter' of undefined
It's source this line of code:
/******/return __webpack_require__(0); /******/})( /************************************************************************/ /******/[ /* 0 */function(module,exports,__webpack_require__){ /* WEBPACK VAR INJECTION */(function(global){'use strict';if(!Highcharts){global.HighchartsAdapter = __webpack_require__(1);var Highcharts=__webpack_require__(2);}module.exports = __webpack_require__(3); /* WEBPACK VAR INJECTION */}).call(exports,(function(){return this;})()); /***/}, /* 1 */function(module,exports){ /**
I've installed 4.0.0 version of react-highcharts.
Following my precedent issue, i'm now facing a new one.
When i add a new point to the data serie using AddPoint, my chart is getting entirely re-drawn instead of just adding the new data point.
Here's the config :
this.data = {
config: {
chart: {
backgroundColor: '#000'
},
credits: {
enabled: false
},
colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
rangeSelector: {
enabled: false
},
title: {
text: '',
style: { 'color': '#fff', 'fontSize': '18px' }
},
series: [{
type: 'line',
data: [],
tooltip: {
enabled: false
}
}]
}
The Store updating the rate :
init: function() {
this.data = {
rate: 0,
chartrate: []
};
},
getInitialState: function() {
return this.data;
},
onGetNewRate: function(id) {
$.ajax({
url: '/instruments/' + id,
dataType: 'json',
cache: false,
success: function(data) {
this.data.rate = data.currentrate;
var rate = data.currentrate;
var timestamp = (new Date()).getTime();
this.data.chartrate = [timestamp, rate];
this.trigger(this.data);
}.bind(this)
});
}
and the the component listening to the previous store :
render: function() {
if (this.refs.renderedchart) {
if (this.state.chartrate[0] !== undefined) {
var chart = this.refs.renderedchart.getChart();
chart.series[0].addPoint(this.state.chartrate);
}
}
return (
<Highchart ref='renderedchart' className="Chart" config={this.props.config}></Highstock>
);
}
please note that the config is coming from a totally different store, as you can see it as props and not as state.
In the same page, I would like to using highchart & highstock in same time,
but it has error as follows:
Highcharts Error #16
Highcharts already defined in the page
This error happens the second time Highcharts or Highstock is loaded in the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file.
How can I use the highchart base on highstock component? thx!
https://www.npmjs.com/package/react-highcharts seems to have 5.0.0
already while the package.json
in master
states 4.0.0
.
Would it be possible to add git tags for those versions that have been pushed to npm, in order to see what has changed?
The readme has a link for "example of using react-highcharts/highstock" to http://kirjs.github.io/react-highcharts/highstock.html but it returns 404 Not Found
Im unable to use highcharts and highstock on the same page. im getting error 16:
http://www.highcharts.com/errors/16
Highcharts already defined in the page
This error happens the second time Highcharts or Highstock is loaded in the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file.
im using the react-highcharts libraries like this:
var Highstock = require('react-highcharts/dist/bundle/highstock');
var Highcharts = require('react-highcharts/dist/bundle/highcharts');
Any ideas or is this not possible?
I'm trying this example: http://kirjs.github.io/react-highcharts/ but I'm getting the JS error:
Uncaught TypeError: Cannot set property 'HighchartsAdapter' of undefined
I'm using webpack in my project.
hi @kirjs:
I use react-router to change my page, after I went to another page and go back Chart Page, the highcharts obj's properties is gone, my code as follows:
and google console log:
have any good solution?
Hello,
I was hoping you could help me quickly with an issue I'm having with React and Highcharts. I'm new to both, which is why I don't understand how to fix the problem. Any help you can lend would be greatly appreciated.
Here is the error I am seeing:
ReferenceError: document is not defined
at /home/bob/DEV/vynosny-web/node_modules/commonjs-highcharts/index.js:72:9
Here is my code:
import React, { PropTypes, Component } from 'react';
import styles from './ChartPage.css';
import withStyles from '../../decorators/withStyles';
import Highstock from 'commonjs-highcharts';
const data = [[1220832000000, 22.56], [1220918400000, 21.67], [1221004800000, 21.66], [1221091200000, 21.81], [1221177600000, 21.28], [1221436800000, 20.05], [1221523200000, 19.98], [1221609600000, 18.26], [1221696000000, 19.16], [1221782400000, 20.13], [1222041600000, 18.72], [1222128000000, 18.12], [1222214400000, 18.39], [1222300800000, 18.85], [1222387200000, 18.32], [1222646400000, 15.04], [1222732800000, 16.24], [1222819200000, 15.59], [1222905600000, 14.3], [1222992000000, 13.87], [1223251200000, 14.02], [1223337600000, 12.74], [1223424000000, 12.83], [1223510400000, 12.68], [1223596800000, 13.8], [1223856000000, 15.75], [1223942400000, 14.87], [1224028800000, 13.99], [1224115200000, 14.56], [1224201600000, 13.91], [1224460800000, 14.06], [1224547200000, 13.07], [1224633600000, 13.84], [1224720000000, 14.03], [1224806400000, 13.77], [1225065600000, 13.16], [1225152000000, 14.27], [1225238400000, 14.94], [1225324800000, 15.86], [1225411200000, 15.37], [1225670400000, 15.28], [1225756800000, 15.86], [1225843200000, 14.76], [1225929600000, 14.16], [1226016000000, 14.03], [1226275200000, 13.7], [1226361600000, 13.54], [1226448000000, 12.87], [1226534400000, 13.78], [1226620800000, 12.89], [1226880000000, 12.59], [1226966400000, 12.84], [1227052800000, 12.33], [1227139200000, 11.5], [1227225600000, 11.8], [1227484800000, 13.28], [1227571200000, 12.97], [1227657600000, 13.57], [1227830400000, 13.24], [1228089600000, 12.7], [1228176000000, 13.21], [1228262400000, 13.7], [1228348800000, 13.06], [1228435200000, 13.43], [1228694400000, 14.25], [1228780800000, 14.29], [1228867200000, 14.03], [1228953600000, 13.57], [1229040000000, 14.04], [1229299200000, 13.54]];
const chartConfig = {
title: {
text: 'AAPL stock price by minute',
},
subtitle: {
text: 'Using ordinal X axis',
},
xAxis: {
gapGridLineWidth: 0,
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h',
}, {
type: 'day',
count: 1,
text: '1D',
}, {
type: 'all',
count: 1,
text: 'All',
}],
selected: 1,
inputEnabled: false,
},
series: [{
name: 'AAPL',
type: 'area',
data: data,
gapSize: 5,
tooltip: {
valueDecimals: 2,
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
},
stops: [
[0, Highstock.getOptions().colors[0]],
[1, Highstock.Color(Highstock.getOptions().colors[0]).setOpacity(0).get('rgba')],
],
},
threshold: null,
}],
};
@withStyles(styles)
class ChartPage extends Component {
static contextTypes = {
onSetTitle: PropTypes.func.isRequired,
};
componentDidMount() {
const chart = this.refs.chart.getChart();
chart.series[0].addPoint({x: 10, y: 12});
}
render() {
const title = 'Chart';
this.context.onSetTitle(title);
return (
}
export default ChartPage;
At the moment, react-highcharts
depends on highcharts 2.x, and 4.x has been out now with a lot of improvements and changes. I'd guess there's work to be done for migrating, but I wanted to know if this was going to be prioritized at all.
Hi, I use npm to install react-highcharts with [email protected]. And the error says:
npm ERR! peerinvalid The package react does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@*
So how can I use react-highcharts with [email protected]๏ผ
Hi,
I'm working through a Highcharts example and using React with your excellent project here.
Unfortunately I'm really struggling to access Highcharts.getOptions().colors
. Can I do it from a standard import like:
var Highcharts = require('react-highcharts');
Or do I have to import the highcharts library separately? I'm afraid my understanding of node's modules is not good enough to figure it out, though hopefully it is simple.
Any help would be much appreciated,
Michael
When I try to import Highcharts from 'react-highcharts'
, I got this error.
error given was: ReferenceError: document is not defined **/node_modules/react-highcharts/index.js:138:9
Since document is a kind of client-side stuff or I misunderstand it ?
When Highcharts is already defined globally on a webpage an exception is thrown.
Would it be possible to conditionally require Highcharts to stop this issue?
Hi,
Can we use something like
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
As using config
var config = {
/* HighchartsConfig */
};
React.render(, document.body);
So, Please let me know how to use setOptions in HighCharts.
I have implemented my compnent in following way:
var React = require('react');
var HighCharts = require('react-highcharts');
var Theme = require('../settings/Theme');
var HighChartsComponent = React.createClass({
componentWillMount: function(){
this.setTheme();
},
getChart: function(){
if(this.refs.chart != undefined){
return this.refs.chart.getChart();
}else {
throw new Error('Chart is only available when chart didMount');
}
},
/**
* This method sets theme to Highcharts
*/
setTheme: function () {
HighCharts.Highcharts.theme = Theme;
HighCharts.Highcharts.setOptions(HighCharts.Highcharts.theme);
},
render: function () {
return (
<HighCharts
config={this.props.data}
ref={"chart"}
style={{width: '100%', height: '100%', position: 'absolute'}}
/>
);
}
});
module.exports = HighChartsComponent;
Other chart types, like - area, column, etc is working fine, but when i try to implement following pie chart demo http://www.highcharts.com/demo/pie-legend, chart is not rendered at all, although it have received props :
What i'm doing wrong, or what can cause the problem?
visibilitySetter: function (value, key, element) {
// IE9-11 doesn't handle visibilty:inherit well, so we remove the attribute instead (#2881, #3909)
if (value === 'inherit') {
element.removeAttribute(key);
} else {
element.setAttribute(key, value);
}
},
The problem is between the "} else" it shows up as
Not sure what is causing this maybe an IDE issue? Maybe it is clashing with Babelify or Browserify or Gulp... but I think cleaning spaces in all your files and converting tabs to spaces before pushing to npm.
Once this is merged in: akiran/react-highlight#9
akiran/react-highlight#8 (comment)
I'd like to be able to change the Highcharts theme. I patched the source to add the below at the start of renderChart:
if (this.props.theme) {
Highcharts.theme = this.props.theme;
Highcharts.setOptions(Highcharts.theme);
}
This works fine when used like so:
<Highcharts config = {highchartsConfig} theme = {HighchartsTheme.dark}></Highcharts>
Is there a simpler/better way to customize the theme? If not, could you add the code above?
I'm trying to add point to a rendered chart but getting the following error :
Uncaught SyntaxError: Invalid regular expression: /<(.|\n)*?>/: Stack overflow
code looks like this :
var chart = this.refs.renderedchart.getChart();
chart.series[0].addPoint([1447603399058, 0.94646]);
config looks like this :
config: {
chart: {
backgroundColor: '#000'
},
credits: {
enabled: false
},
colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
rangeSelector: {
enabled: false
},
title: {
text: '',
style: { 'color': '#fff', 'fontSize': '18px' }
},
series: [{
type: 'area',
data: [],
tooltip: {
enabled: false
}
}]
}
really tried everything but was unable to debug.
thanks in advance for your help.
I am trying to use both react-highcharts/more
& react-highcharts/highstock
on the same page, this causes the following error message:
http://www.highcharts.com/errors/16
This maybe similar to this issue, #9 although I thought this had been fixed?
I am using webpack to bundle my code.
Thanks for this module! It's made my job so quick and easy. I know that my PM will want exporting soon, so I am thinking adding the exporting module (found here: http://code.highcharts.com/) will be a nice addition.
I intend to just try to add it here myself and then file a PR, but if someone beats me to it, I will send you a beer!
Thanks for releasing react-highcharts. According to http://www.highcharts.com/docs/chart-and-series-types/heatmap a heatmap requires modules/heatmap.js
from the highcharts distribution. Sample code http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/heatmap/
Is it possible to make this work with react-highcharts?
Hi Kirill,
Is it possible to require highcharts-more (http://www.highcharts.com/component/content/article/2-articles/news/46-gauges-ranges-and-polar-charts-in-beta) to allow us to use beta features like gauge?
Thk
Due to the complex structure of Highcharts
there has been a lot of confusion around how to get the right combination of Highcharts
modules into the codebase.
Also for every additional module or variation of Highcharts
a separate pull request has to be created, each of them following some different structure, making using/contributing to react-highcharts
more and more confusing.
Issues #18, #32, #33, #38, #39 and #40 are still open because of that.
Below I propose the new module structure, which would hopefully bring in understandable and predictable module structure, and will make react-highcharts
easier to use and to contribute to.
require('react-highcharts')
By default only the React
component should be required, expecting that Highcharts
was required independently, and a global variable exists.
This is a breaking change, and addresses #40.
require('react-highcharts/bundles/highcharts'); // Acts as require('react-highcharts') now
require('react-highcharts/bundles/highmaps');
require('react-highcharts/bundles/highstock');
Bundled versions come with their own version of Highcharts/Highmaps/Highstocks/Highwhatever.
They are meant to simplify the usage of the component, and no to bundles can be loaded simultaneously, as that would bring 2 versions of the highcharts into the codebase.
This would address #18
require('react-highcharts/modules/more')
;
require('react-highcharts/modules/exporting')
;
require('react-highcharts/modules/heatmap')
;
etc.
Modules will be used as a shortcuts to the modules folder in highcharts-release
.
They won't have Highcharts
bundled, and can be required in any combinations.
the hightcharts.js
is too big. Is there any way load like this?
var Spline = require('react-hightcharts').spline;
var Pie = require('react-hightcharts').pie;
Looks like HighSlide Software is adding Highcharts to NPM: highcharts/highcharts#3616
The package is here, but appears to still have some issues. Once resolved, it would be great if react-highcharts could use the official package instead of bundling Highcharts.
I'd suggest making Highcharts a peer dependency.
Running npm install react-highcharts --save
pulls in what seems to be an outdated version of this package. Can you please push a new version?
Thanks
For access to methods & properties from the Highcharts library you can use Highcharts.Highcharts. For example, the Highcharts options are available via Highcharts.Highcharts.getOptions().
Why the extra level?
Sory for no description but I've double click enter :/
Hi,
Thanks for this cool component.
I just would like to know how to set a custom chart title. I tried to add a props 'title' or to add a 'title' key in my config object but without success.
These were specifically found on React 0.14.0-alpha3
Warning: require("react/addons") is deprecated.
Access using require("react/addons/{addon}") instead.
Warning: DIV.getDOMNode(...) is deprecated. Please use React.findDOMNode(instance) instead.
This is more of a warning/heads up, than an actual issue. I'm sure you were planning on making the appropriate changes once 0.14 is out of alpha+beta.
Is it possible to draw map with react-highcharts?
I want to pass data from parent component, but how could I stop reinit highchart every I passed the data?
Is there a way to update the chart, cause if I understand the code you can only create a new chart. But after that the chart was rendered the first time it should be possible to just update the chart data like this:
chart.series[0].setData(data,true);
like:
Highcharts.setOptions({
global: {
// timezoneOffset: +1,
useUTC: false
}
});
Cannot get many functions in Highcharts API to work. Getting errors like 'chart.series.addPoint is not a function' and 'chart.addPoint is not a function' for addPoint, setData, etc.
var chart = this.refs.chart.getChart();
chart.series.addPoint({
color: "#000",
name: "Adding A Point",
value: "$ 1234.00",
y: 1234.00
});
As title says, my click event is not firing with. The load event is firing (so I know the events object is being passed), however click does not fire. Is there something I'm missing?
I'm establishing it on the page as such:
import $ from "jquery"; // you should probably note in the documentation that jQuery is a dependency
import Highcharts from "react-highcharts";
My config (generified a bit):
var config = {
chart:{
events: {
click: function (event) {
// this doesn't work
console.log(this);
},
load:function(){
// this works
console.log(this);
}
},
// this is ignored
options3d:{
alpha:45,
beta:0,
enabled:true
},
type:"pie"
},
plotOptions:{
pie:{
cursor:"pointer",
depth:35,
dataLabels:{
enabled:true,
format:"{point.name}"
}
}
},
series:[{
data:zeDataStuffz,
name:"Le pie",
type:"pie"
}],
title:{
text:""
},
tooltip:{
pointFormat:"Occurrences: <b>{point.y}</b>"
}
};
Then its called:
<Highcharts config={config} ref="pieChart"/>>
The data is being passed correctly and the chart renders (although without 3D? minor issue compared to click), however click is not firing.
doc = document,
^
ReferenceError: document is not defined
Seems to be an issue when trying to run this using an isomorphic app
Hi,
I use click events on a chart to signal my parent component what point was clicked. This in turn updates the parent's state which get sent over to the highcharts component. This causes always a redraw of the graph lines, which is something I don't want. How could I control when to redraw and when not? I tried checking if the value-table from the paren'ts state changes or not, but still the chart redraws itself no matter what.
Is it possible to use the Stock chart functionality?
http://api.highcharts.com/highstock#Highcharts.StockChart
I see in the code it is currently hard coded for Chart
https://github.com/kirjs/react-highcharts/blob/master/src/Highcharts.jsx#L22
The documentation shows -
var Highcharts = require('react-highcharts/bundle/highcharts'); // Highcharts is bundled
But I believe this should be -
var Highcharts = require('react-highcharts/dist/bundle/highcharts'); // Highcharts is bundled
As an extension to #40; We are currently seeing the same warning after upgrading to v3.
From a quick investigation of 965da2b#diff-06d73f0df0c20a3ee847700bbde19f74R1, I believe that this line should be
if (!global.Highcharts) {
I've tried every possible combination of imports that I can think of but no luck. Here is what I think should work:
import Highcharts from 'highcharts-release/highcharts.src.js';
import 'highcharts-release/highcharts-more.src.js';
import 'highcharts-release/modules/exporting.src.js';
import ReactHighcharts from 'react-highcharts';
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.