Cannot Read Property 'hoverseries' of Undefined React
whawker / react-jsx-highcharts Goto Github PK
Highcharts built with proper React components
Home Folio: https://whawker.github.io/react-jsx-highcharts/examples
License: MIT License
react-jsx-highcharts'due south Introduction
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 suit to concern logic in your React application.
Other Highcharts wrappers completely destroy and recreate the nautical chart when the configuration options change, which is very wasteful and inefficient.
React JSX Highcharts uses a different approach. Past providing React components for each Highcharts component, we tin observe exactly which prop has changed and call the optimal Highcharts method backside the scenes. For instance, if the data prop were to change on a <Series /> component, React JSX Highcharts tin can follow Highcharts best practices and use the setData method rather than the more expensive update.
React JSX Highcharts also enables yous to write your own Highcharts components, via its exposed hooks.
Installation
# Install the appropriate React JSX package npm install --relieve react-jsx-highcharts # or react-jsx-highstock # or react-jsx-highmaps # And the peer dependencies npm install --save react react-dom prop-types [email protected]^9.0.0 Licensing
React JSX Highcharts is free to apply, however Highcharts itself requires a license for commercial utilize. Highcharts license FAQs.
Documentation
Examples
Getting started
The intention of this library is to provide a very thin brainchild of Highcharts using React components. This has been achieved by passing Highcharts configuration options as component props.
In the vast majority of cases, the proper noun of the configuration selection, and the proper name of the component prop are the aforementioned.
Case
<Tooltip /> component
< Tooltip padding = { 10 } hideDelay = { 250 } shape = "foursquare" carve up / >
This corresponds to the Highcharts' tooltip configuration of
tooltip: { enabled: truthful , // This is assumed when component is mounted padding: ten , hideDelay: 250 , shape: 'square' , carve up: 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 2 exceptions to the to a higher place;
Exception ane
Where Highcharts events are concerned - instead of passing events as an object, we use the React convention onEventName.
Example
< SplineSeries id = "my-serial" data = { myData } onHide = { this . handleHide } onShow = { this . handleShow } / > This would stand for to the Highcharts configuration
series: [ { type: 'spline' , id: 'my-series' , data: myData , events: { hibernate: this . handleHide , show: this . handleShow } } ] ; Exception two
text configuration options are passed as a React child
Example
< Title >Some Text Here< / Title > This would stand for 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, evidently.
Thanks to @anajavi for all the assistance and support in maintaining this project.
react-jsx-highcharts's People
react-jsx-highcharts's Issues
Exporting capabilities?
Is at that place a way to use highcharts exporting capabilities with this library?
I love the declarative nature of how this library was implemented, then i was hoping that the in that location is a like mode to implement the chart exporting feature.
Navigator unmount mistake
When using Navigator in a HighchartsStockChart, as soon every bit my main component unmounts (like navigating to some other page using react router) I get spammed with this error when the mouse moves:
highstock.js:436 Uncaught TypeError: Cannot read holding 'normalize' of undefined
at HTMLDocument.a.mouseMoveHandler
If I remove the Navigator component, everything seems to be fine.
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.ten, y: this.props.y_end}, {x: this.props.10, 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 modify 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.one thousand. a list of values)
I would appreciate your input.
Setting 'visible' prop on series non working
Thanks for contributing this. Great stuff. Finally we can have initial animation when charts are renderd
On another notation, the visible prop doesn´t seem to piece of work:
http://api.highcharts.com/highcharts/series%3Ccolumn%3E.visible
I´1000 trying to hide all categories except the outset 2.
Example from working code:
prepareSeries ( surveys ) { const series = surveys . map ( ( s , i ) => { const parties = due south . results . list . sort ( ( a , b ) => a . ratio - b . ratio ) . reverse ( ) . map ( p => { return { proper noun: p . text , y: p . ratio } } ) return ( { visible: ( i > ane ) ? false:true , proper name: s . election . text , information: parties } ) } ) return series } Highmaps?
I am trying to use React with Highmaps. Currently using the react-highcharts package only am running into issues when trying to phone call the build in methods (example. .hibernate() ) 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 have.
The question is then, does react-jsx-highcharts work with highmaps?
Thank you!
Multiple YAxis rerender bug
I noticed a foreign issue this evening when using multiple YAxis in a single chart. Just the get-go YAxis updates on rerenders triggered by prop updates.
Confirmed this behavior by swapping the guild of the YAxis from the image in a higher place.
Whatsoever ideas?
Thanks!
Highcharts 6 question
I run across there is a dependency on [e-mail protected]^5.0.0, has this been tested with highcharts 6?
HighchartsStock with RangeSelector during unmount throws mistake
First of all, prissy 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; information technology throws the post-obit error.
Uncaught TypeError: Cannot read property 'rangeSelector' of undefined
When I remove the range selector everything goes normal.
Anybody has whatever suggestions?
This is the code.
<HighchartsStockChart> <Chart zoomType="10" /> <Title>Highstocks Example</Title> <Legend> <Legend.Championship>Key</Legend.Title> </Legend> <RangeSelector> <RangeSelector.Button count={1} blazon="day">1d</RangeSelector.Button> <RangeSelector.Button count={seven} type="twenty-four hour period">7d</RangeSelector.Push button> <RangeSelector.Push count={1} blazon="month">1m</RangeSelector.Button> <RangeSelector.Push blazon="all">All</RangeSelector.Button> </RangeSelector> <Tooltip /> <XAxis> <XAxis.Title>Time</XAxis.Title> </XAxis> <YAxis id="price"> <YAxis.Title>Cost</YAxis.Title> <AreaSplineSeries id="profit" proper name="Turn a profit" data={data1} /> </YAxis> <YAxis id="social" opposite> <YAxis.Championship>Social Fizz</YAxis.Title> <SplineSeries id="twitter" name="Twitter mentions" data={data2} /> </YAxis> <Navigator> <Navigator.Series seriesId="turn a profit" /> <Navigator.Serial seriesId="twitter" /> </Navigator> </HighchartsStockChart> Is the highstock-release dependency necessary for Simple highcharts?
@whawker Exercise we need to take 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 non have license to highstocks, even though they have purchased a highcharts license.
Feature request: Add drilldown
SeriesProvider don't removes handleSeriesAdded Consequence 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 non 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 ways you called setState() on an unmounted component. This is a no-op. Delight check the code for the SeriesProvider(t) component. Multiple charts on same page share context
Hello
I am using a layout command where a user can add multiple charts as private components on a unmarried folio. In this example, I would similar to interact with the chart instance using the underlying highcharts object so I can call the apis as needed.
(You can run into my conversation with highcharts here)
You can see the last solution from their developers was to call drillToNode on the serial. However, the navigation path to the series is a chip clunky from the react-jsx-highcharts wrapper - for example:
this.treemapSeries.context.Highcharts.charts[0].serial[0].drillToNode(thirty);
Yet 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 case below - pressing the button counts the charts attached to both instances of the HighChartsChart chemical element. Sandbox instance
I am pretty certain I am accessing the underlying highcharts object from the reference incorrectly, maybe even attaching the reference to the incorrect element in the rendered html - however this case nicely shows the trouble to obtain the series for a particular chart.
Can you provide an case how to obtain the correct underlying highcharts serial object for a chart in a given context?
Thanks in advance
[email protected]
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 non support multiple packages in a repo, so I couldn't just add together the latest version of this library via github direct. Cheers!
Permit styled fashion (css) for highcharts
From my agreement, right now, react-jsx-highcharts imports the elevation level 'highcharts'. Merely as of version 5 in that location is a styled fashion using css for separation of concerns purposes. And equally per the highcharts documentation for Style past CSS, you demand to load highcharts/js/highcharts.js instead of the top highcharts equally y'all would ordinarily do for the svg styled mode.
At present have I missed something in the configuration or is it actually something that doesn't exist nonetheless?
I don't mind trying to open a PR and endeavour to fix it from my end if you're okay with information technology.
Support colors
Add together Highmaps support
Cheers for your not bad package!
I am doing a project to visualise a big sized dataset with longitudes and latitudes. Equally at that place is no example for map-information graphs, is there anybody know how to do the basic configuration? Cheers very much !
Cannot read holding 'chart' of undefined when upgrading to two.0.0
I'd upgraded from 1.4.0 to 2.0.0 and accept the error:
Cannot read property 'chart' of undefined I've returned to 1.iv.0 and information technology works.
Happy to poke around some more, but I'yard having difficulty recreating it every bit a standalone test. If someone tin can orient me, happy to dig around. The stack trace didn't aid me. Here it is:
react-jsx-highcharts.min.js:1 Uncaught TypeError: Cannot read belongings '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.evolution.js:10605) at performUnitOfWork (react-dom.evolution.js:12573) at workLoop (react-dom.development.js:12682) at HTMLUnknownElement.callCallback (react-dom.development.js:1299) at Object.invokeGuardedCallbackDev (react-dom.evolution.js:1338) at invokeGuardedCallback (react-dom.evolution.js:1195) at performWork (react-dom.development.js:12800) at batchedUpdates (react-dom.evolution.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.evolution.js:1874) value @ react-jsx-highcharts.min.js:one finishClassComponent @ react-dom.development.js:10249 updateClassComponent @ react-dom.development.js:10226 beginWork @ react-dom.development.js:10605 performUnitOfWork @ react-dom.evolution.js:12573 workLoop @ react-dom.development.js:12682 callCallback @ react-dom.development.js:1299 invokeGuardedCallbackDev @ react-dom.evolution.js:1338 invokeGuardedCallback @ react-dom.development.js:1195 performWork @ react-dom.development.js:12800 batchedUpdates @ react-dom.development.js:13244 performFiberBatchedUpdates @ react-dom.evolution.js:1646 stackBatchedUpdates @ react-dom.evolution.js:1637 batchedUpdates @ react-dom.development.js:1651 batchedUpdatesWithControlledComponents @ react-dom.evolution.js:1664 dispatchEvent @ react-dom.evolution.js:1874 proxyConsole.js:54 The above mistake occurred in the <northward> component: in n (created by HighchartsProvider(n)) in HighchartsProvider(northward) (at ResultsChart.js:xv) RangeSelector.Button fault
The RangeSelector.Button component doesn't seem to be working properly. You tin actually see an instance 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 lawmaking similar this:
<RangeSelector> <RangeSelector.Push button></RangeSelector.Push button> </<RangeSelector> Yous'll finish up with this fault:
Uncaught TypeError: Cannot read holding 'state' of undefined at https://code.highcharts.com/stock/highstock.js:484:470 at Array.forEach (<anonymous>) at a.each (https://lawmaking.highcharts.com/stock/highstock.js:28:325) at Eastward.updateButtonStates (https://code.highcharts.com/stock/highstock.js:484:70) at East.render (https://code.highcharts.com/stock/highstock.js:492:442) at a.Chart.<anonymous> (https://lawmaking.highcharts.com/stock/highstock.js:499:481) at a.Chart.a.(bearding office) (https://code.highcharts.com/stock/highstock.js:xix:186) at a.Chart.<bearding> (https://lawmaking.highcharts.com/stock/highstock.js:517:137) at a.Chart.a.(anonymous function) [as update] (https://lawmaking.highcharts.com/stock/highstock.js:19:186) at https://unpkg.com/[email protected]/dist/react-jsx-highstock.min.js:ane:11143 My "fix" for the time being is to just pass the buttons in like this:
<RangeSelector buttons={myArrayOfButtonsHere}></<RangeSelector>
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.
Alive Example:
https://codesandbox.io/south/zql6o1kzx3
This merely seems to happen if the opposite axis is rendered first. If there is a left axis so an opposite ane, it works fine. If there is only one axis, but information technology is opposite, then it overlaps.
Progress Bar
Hullo @whawker ,
I am trying to create a progress bar with the BarSeries.
I am referring to this(https://jsfiddle.cyberspace/huphtur/cm6dmoga/) case to create progress bar. Non sure where I am going wrong. Can you help please?
I am open to some other solution as well. Just need to a progress bar.
Beneath is the code I am working on:
import React, { Component } from 'react'; import { HighchartsChart, Chart, XAxis, YAxis, Tooltip, BarSeries } from 'react-jsx-highcharts'; form BasicVsPremiumPB extends Component { render() { const plotOptions = { series:[{ grouping: false, blitheness: false, enableMouseTracking: faux, showInLegend: false, color: 'scarlet', pointWidth: 25, dataLabels: { className: 'highlight', format: '150 / 600', enabled: truthful, align: 'right', style: { color: 'white', textOutline: false, } } }, { enableMouseTracking: false, information: [25], colour: 'navy', borderWidth: 0, pointWidth: 25, blitheness: { duration: 250, } }] }; return ( <div className="chartApp"> <HighchartsChart plotOptions={plotOptions}> <Nautical chart inverted top="70"/> <XAxis name="Calendar month"></XAxis> <YAxis id="number" > <BarSeries id="Benefits" name="Benefits" data={[25]} /> {/* <BarSeries id="Benefits" name="Benefits" information={[100]} /> */} </YAxis> <Tooltip shared backgroundColor="white" shadow={imitation}></Tooltip> </HighchartsChart> </div> ); } } export default BasicVsPremiumPB; YAxis shows no numbers when Series is wrapped in a div
If you create a bureaucracy that has a two YAxis objects, each with a Series as a child, simply the Series objects are really wrapped in a <div>, and then the range of the 2d YAxis is non shown.
< YAxis id = "cost" > < YAxis . Title >Price< / YAxis . Championship > < AreaSplineSeries id = "profit" name = "Profit" data = { data1 } / > < / YAxis > < YAxis id = "social" opposite > < YAxis . Title >Social Buzz< / YAxis . Championship > < div > < SplineSeries id = "twitter" name = "Twitter mentions" data = { data2 } / > < /div> < /YAxis> Live Example:
https://codesandbox.io/s/p3xrwv36m0
Observe that the Social Buzz axis has no numbers.
Remove the <div> around the the Serial and information technology works.
In my case, this is happening because I am returning 1 or more Series objects from an intermediate component that is a kid of the YAxis, and since React fifteen 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 xvi, but that will require bit of work in my app.
Is there any way to make this work with the intermediate <div>?
BubbleSeries non working
Hi @whawker ,
I am working with Bubble series and its not generating the chart. If I change the series type to whatsoever other blazon(Eastward.g. Scatter), it works fine. I am not certain if I am passing the data correctly or its another result. Please help.
This is the below code:
import React, { Component } from 'react'; import { HighchartsChart, Chart, XAxis, YAxis, Tooltip, Fable, 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" proper name="Premium" color="#e96c39" data={data} /> </YAxis> <Fable /> <Tooltip backgroundColor="white" shadow={imitation}></Tooltip> </HighchartsChart> </div> ); } } consign default CompetitiveLandscape; 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 exist passed to highcharts in "raw" format.
I've traced this code:
this.props.removePlotLine("SomeID");
and landed in the raw part 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 but:
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 part 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 skillful reason, why you guys wrapped the remove methods with cleanPropsBeforeUpdate) due it seems to exist a general problem (same applies to removePlotBand).
Possibly 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 just the first statement (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.
Dynamically Replacing YAxis throws Highcharts error
First let me say that i call back 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" marshal = "right" verticalAlign = "middle" / > < XAxis type = "datetime" > < XAxis . Title >Time< / XAxis . Title > < / XAxis > { selectedTypes . map ( type => < YAxis id = { `y-centrality- ${ blazon . id } ` } key = { type . id } > < YAxis . Title > { ` ${ blazon . proper name } [ ${ type . unit } ]` } < / YAxis . Title > < LineSeries id = { `series- ${ type . id } ` } name = { type . proper noun } data = { this . getSeriesDataByTypeId ( type . id ) } / > < / YAxis > ) } < / HighchartsChart > This works fine until one of the selectedTypes is removed. The following mistake 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?
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 Philharmonic Chart, removing everything just the column serial. I replaced the column series with 'BarSeries' merely 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 but matter that achieved what I was looking for, regardless of if it was BarSeries or ColumnSeries. Maybe I had something wrong? Beneath is what I used before calculation the inverted prop...
import React, { Component } from 'react';
import {
HighchartsChart, Chart, XAxis, YAxis, Title, Legend, BarSeries
} from 'react-jsx-highcharts';
form Confined extends Component {
render() { const plotOptions = { series: { stacking: 'normal' } } render ( <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, i, 3, 4]} /> <BarSeries id="john" proper noun="John" data={[2, 3, five, 7, 6]} /> <BarSeries id="joe" name="Joe" data={[four, 3, 3, 9, 9]} /> </YAxis> </HighchartsChart> </div> ); } }
export default Bars;
Unmount issue with AxisTitle
Hi, another unmount issue :(
I only accept a minified stacktrace, just the lawmaking relates to this commit: 78ceaab
This was working in the 1.3.three release.
// AxisTitle.js componentWillUnmount () { if (this.props.getAxis()) { // getAxis throws the fault this.updateAxisTitle({ text: null }); } } highstock.js:formatted:1 Uncaught TypeError: Array.prototype.find chosen on zippo or undefined at notice (native) at a.find (http://localhost:8080/bundle.js:43982:452) at a.Chart.get (http://localhost:8080/package.js:44208:343) at Object.five [as getAxis] (http://localhost:8080/packet.js:70719:6862) at t.value (http://localhost:8080/parcel.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/package.js:63425:23) And also this one:
// Series.js componentWillUnmount () { if (this.props.getSeries()) { // getSeries will throw the mistake below this.props.remove(); // Series may have already been removed, i.e. when Centrality unmounted } } Uncaught TypeError: Assortment.prototype.detect chosen on null or undefined at find (native) at a.find (http://localhost:8080/bundle.js:43969:452) at a.Chart.get (http://localhost:8080/packet.js:44195:343) at Object.p [as getSeries] (http://localhost:8080/packet.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/package.js:63070:12) at ReactCompositeComponentWrapper.unmountComponent (http://localhost:8080/packet.js:63402:eleven) at Object.unmountComponent (http://localhost:8080/package.js:5469:22) at ReactCompositeComponentWrapper.unmountComponent (http://localhost:8080/bundle.js:63412:23) PlotLine values not updating, PropTypes wrong
For some reason, PlotLine values are non updating. Maybe I am missing a bespeak, but It seems
that PlotLine needs to provide componentDidUpdate.
My solution was to add together following code:
componentDidUpdate (prevProps) { this.props.removePlotLine(prevProps.id); const { axisId, dimension, ...residuum } = this.props; this.props.addPlotLine(remainder); } Because of the other bug I've reported, this solution will not fix the bug, considering this.props.removePlotLine won't pass the id to highcharts (Described in: #15)
The PropTypes seems to exist copied from PlotBand. This ways value property is not existing in PlotLine simply 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 muddied hack):
import { PlotLine equally 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.cord, addPlotLine: PropTypes.func, // Provided by AxisProvider removePlotLine: PropTypes.func // Provided by AxisProvider }; constructor(props) { super(props); const id = props.axisId || props.id; if (!id) render nix; const centrality = props.become(id); const getBoundAxisMethod = boundContextHelper(props.getChart(), axis); const removePlotLine = getBoundAxisMethod(centrality && 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 mail a lilliputian snippet asap how to reproduce the trouble.
Series props not working
Hello,
I'm new to highcharts and your library and then I constitute information technology's really hard to understand what's going on. There are a lot of Highcharts api I tried to utilise in the react component, however, nothing is working. Please permit me how to work with Highchart Api, cheers! For example, I want to add tooltip to the series, only it doesn't work, I desire 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'; crave('highcharts/highcharts-more')(Highcharts); crave('highcharts/modules/solid-judge')(Highcharts); class GaugeChart extends Component { render() { const plotOptions = { solidgauge: { dataLabels: { y: 5, borderWidth: 1, useHTML: true, backgroundColor: 'lightblue', colour: 'navy' }, lineWidth: 20, allowPointSelect: true, visible: false }, series: { lineWidth: 20 } } const YAxisTitleOption = { text: "Speedometer", useHTML:true, margin:100, x: 0, y: -sixty } const paneOptions = { eye: ['l%', 'forty%'], size: '60%', startAngle: -90, endAngle: ninety, groundwork: { backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE', innerRadius: 'threescore%', 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={goose egg} tickAmount={6} labels={{ y: sixteen }}> <Series colour="cerise" dashStyle="Dash" id="gauge-test" name='Speed' data={[xc]} lineWidth={twenty} type="solidgauge" linkedTo="www.facebook.com" tooltip={toolTip} /> </YAxis> </HighchartsChart> </div> ); } } consign default GaugeChart; Support for Estimate charts
Thanks for the piece of work on this, super useful library.
Quick question however, is at that place support for highcharts-more? I can't seem to get any of the charts provided there working with this.
Properties of <Nautical chart/> not updating when changed
Howdy...first, let me say cheers for this project. I was considering doing something like this for Highcharts, considering....well...declarative graphs FTW! Now I can just apply this and help make it improve.
I'm running into an outcome hither where I desire to be able to change thebackgroundColor of the chart (among other things similar margins, borders, etc.) The problem is that if I change a prop of the <Chart> component, for case, the backgroundColor, fifty-fifty though the return() function of my component is called with the correct color value, the background colour of the chart doesn't modify. This happens for margins likewise and I wait other props.
In both cases, the initial value of the prop is respected, so the margins and background color are correct, merely later changes are not rendered.
I was able to replicate this in the AddSeries demo by changing ane of the buttons to modify the backgroundColor in the state. Here is the updated lawmaking:
import React, { Component } from 'react' import Highcharts from 'highcharts' import { Chart, HighchartsChart, withHighcharts, XAxis, YAxis, Title, Fable, LineSeries } from 'react-jsx-highcharts' import ExampleCode from '../utils/ExampleCode' import lawmaking 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.demark(this) this.handleRemoveSeries = this.handleRemoveSeries.bind(this) this.renderSeries = this.renderSeries.demark(this) const at present = Date.now() this.state = { now, serial: [ { name: 'Profit', data: createRandomData(now, 1e8), }, ], seriesCounter: 1, color: '#ff0000', } } createRandomSeries(index) { return { name: `Series${index}`, data: createRandomData(this.country.at present, 1e8), } } handleAddSeries = e => { e.preventDefault() this.setState({ color: this.state.color === '#ff0000' ? '#0000ff' : '#ff0000', }) } handleRemoveSeries(e) { e.preventDefault() const { series } = this.land const randomIndex = Math.floor(Math.random() * serial.length) serial.splice(randomIndex, i) this.setState({ serial, }) } renderSeries({ name, data }) { render <LineSeries id={name} name={proper name} key={name} data={information} /> } render() { return ( <div className="app"> <HighchartsChart> <Chart backgroundColor={this.state.colour} /> <Title>Dynamically add together/remove serial</Title> <Legend marshal="left"> <Fable.Title>Legend</Legend.Title> </Legend> <XAxis blazon="datetime"> <XAxis.Title>Time</XAxis.Title> </XAxis> <YAxis id="price"> <YAxis.Championship>Toll</YAxis.Title> {this.state.series.map(this.renderSeries)} </YAxis> </HighchartsChart> <div className="btn-toolbar" role="toolbar"> <push button className="btn btn-master" onClick={this.handleAddSeries}> Toggle Colour </push button> <button className="btn btn-danger" onClick={this.handleRemoveSeries}> Remove line serial </button> </div> <ExampleCode name="AddSeries">{code}</ExampleCode> </div> ) } } export default withHighcharts(App, Highcharts) This seems similar something that should work, and so I'thousand wondering if I am missing something or if in that location is a bug.
Cheers!
Updating Alive Data on LineChart
Hey buddy, thanks for all the awesome work with this project.
Please run into the sandbox linked here - CodeSandbox.io
I am trying to update data to show a series of updated points on a chart. The like lawmaking works on a pure HighChart js command, 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 nautical chart drawn.
this.setState({ information: this.land.data });
I have also had to initialise the array to have n empty array points at the kickoff of the control to correctly prove the correct range on the chart before the points start ticking in.
while (idx < buffersize) { information.push([]); idx++; } Also can you shed some light on how best to get the Series case from the controls rendered? Surely there is a amend fashion than traversing a reference similar I have shown below:
<HighchartsChart ref={ref => this.chart = ref}>
if (this.chart) { let nautical chart = this.chart.context.Highcharts.charts[0]; if (chart) { chart.series[0].addPoint(this.land.data[this.country.information.length - 1], true, true); } } I would like to see the like output to available on the Live Information demo on the Highcharts website - Dynamic Updates
thanks in advance - I am pretty sure I must be over thinking the solution here.
[e-mail protected]
How does this library compare to https://github.com/kirjs/react-highcharts?
I'm deciding which ane to use. The react-highcharts is obviously more pop, but I'1000 wondering, @whawker, if you'd describe some reasons to utilize react-jsx-highcharts over the other? Thanks!
Highcharts Mistake #18
Hello, so im getting this error when im trying the code for highstock hither
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 , Nautical chart , withHighcharts , XAxis , YAxis , Championship , Legend , AreaSplineSeries , SplineSeries , Navigator , RangeSelector , Tooltip } from "react-jsx-highstock" ; import { createRandomData } from "../utils/information-helpers" ; course DemoChart extends Component { constructor ( props ) { super ( props ) ; const now = Date . now ( ) ; this . state = { data1: createRandomData ( at present , 1e8 ) , data2: createRandomData ( now , 1e8 ) } ; } render ( ) { return ( < div > < HighchartsStockChart > < Nautical chart zoomType = "x" / > < Championship >Kickoff HighStock< / Title > < Legend > < Fable . Title >Fable Championship< / Fable . Title > < / Legend > < RangeSelector > < RangeSelector . Button count = { ane } type = "day" >1d< / RangeSelector . Button > < / RangeSelector > < Tooltip / > < XAxis > < XAxis . Title >XAxis Title< / XAxis . Title > < / XAxis > < YAxis id = "toll" > < YAxis . Title >Toll< / YAxis . Title > < SplineSeries id = "turn a profit" proper noun = "Turn a profit" data = { this . state . data1 } / > < / YAxis > < Navigator > < Navigator . Series seriesId = "profit" / > < / Navigator > < / HighchartsStockChart > < / div > ) ; } } consign default withHighcharts ( DemoChart , Highcharts ) ; https://jsfiddle.net/gmw3odsq/
im fearly new to HighChart. cheers for the help
Cannot read belongings 'padding' of undefined
Hello,
First of overnice work!
Secondly, I take been trying to implement your example StyleByCSS but I am getting this fault:
What am I missing? everything works fine, except tooltip.
main.js:1822 Uncaught TypeError: Cannot read property 'padding' of undefined at u.Tooltip.init (chief.js:1822) at new u.Tooltip (master.js:1822) at n.value (adviser.entry.js:60548) at CallbackQueue.notifyAll (adviser.entry.js:7138) at ReactReconcileTransaction.shut (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 lawmaking:
<HighchartsChart plotOptions={plotOptions}> <Tooltip borderWidth={3} shadow={simulated} hideDelay={0} padding={8} headerFormat={'<b>Something</b>'} pointFormat={'{series.name}: <b>{point.percentage:.1f}%</b>'} valueSuffix={'%'} /> <PieSeries id="my-pie" name="Nugget Allocation" data={chartData.series[0].data} /> </HighchartsChart> Cheers
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.proper name}: <b>{bespeak.percent:.1f}%</b>'} valueSuffix={'%'} mode={{padding: 8}} /> Can't remove tick marks on Ten-Axis
I would like to brand the X-Centrality on a Lien graph invisible. I have managed to remove everything except the tick marks (ignore the bluish 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. Whatsoever help appreciated.
Crash when toggling a 2nd (opposite) Y-Centrality
I have a second Y-Axis that I toggle on and off. After two cycles (on/off/on/off), I become a crash---every fourth dimension (i.e. perfectly repeatable).
The problem seems to be with the <YAxis.Championship/> component in the secondary serial. 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.land = { showSecondarySeries: faux }; } 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='main' data={[ 1, 2, 3, iv, 5 ]}/> </YAxis> {this.state.showSecondarySeries ? <YAxis id="yAxisSecondary" reverse> <YAxis.Title opposite>Secondary</YAxis.Title> <LineSeries id='secondary' data={[ five, four, iii, 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:i) at n.value (react-jsx-highcharts.min.js:1) at n.value (react-jsx-highcharts.min.js:1) at callComponentWillUnmountWithTimerInDev (react-dom.evolution.js:11117) at HTMLUnknownElement.callCallback (react-dom.development.js:1299) at Object.invokeGuardedCallbackDev (react-dom.evolution.js:1338) at invokeGuardedCallback (react-dom.evolution.js:1195) at safelyCallComponentWillUnmount (react-dom.evolution.js:11125) at commitUnmount (react-dom.development.js:11415) at unmountHostComponents (react-dom.evolution.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.evolution.js:1338) at invokeGuardedCallback (react-dom.development.js:1195) at commitAllWork (react-dom.evolution.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.evolution.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 (bearding) @ react-jsx-highcharts.min.js:ane value @ react-jsx-highcharts.min.js:1 value @ react-jsx-highcharts.min.js:1 callComponentWillUnmountWithTimerInDev @ react-dom.evolution.js:11117 callCallback @ react-dom.evolution.js:1299 invokeGuardedCallbackDev @ react-dom.development.js:1338 invokeGuardedCallback @ react-dom.development.js:1195 safelyCallComponentWillUnmount @ react-dom.evolution.js:11125 commitUnmount @ react-dom.development.js:11415 unmountHostComponents @ react-dom.evolution.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.evolution.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.evolution.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(north))) in ChartProvider(AxisProvider(n)) (created by HighchartsProvider(ChartProvider(AxisProvider(n)))) in HighchartsProvider(ChartProvider(AxisProvider(due north))) (at App.js:36) in n (created past 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 past n) in due north (at App.js:35) in div (created by n) in n (created by north) in n (created by HighchartsProvider(n)) in HighchartsProvider(northward) (at App.js:23) in div (at App.js:xvi) in App (created by withHighcharts(App)) in withHighcharts(App) (at index.js:6) Consider adding an error boundary to your tree to customize mistake treatment behavior. You can learn more than most fault boundaries at https://fb.me/react-fault-boundaries. __stack_frame_overlay_proxy_console__ @ proxyConsole.js:54 logCapturedError$1 @ react-dom.evolution.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.evolution.js:11386 commitAllHostEffects @ react-dom.evolution.js:12271 callCallback @ react-dom.development.js:1299 invokeGuardedCallbackDev @ react-dom.evolution.js:1338 invokeGuardedCallback @ react-dom.evolution.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.evolution.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:one) at north.value (react-jsx-highcharts.min.js:1) at n.value (react-jsx-highcharts.min.js:ane) 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.evolution.js:1195) at safelyCallComponentWillUnmount (react-dom.evolution.js:11125) at commitUnmount (react-dom.evolution.js:11415) at unmountHostComponents (react-dom.development.js:11356) at commitDeletion (react-dom.evolution.js:11386) at commitAllHostEffects (react-dom.evolution.js:12271) at HTMLUnknownElement.callCallback (react-dom.development.js:1299) at Object.invokeGuardedCallbackDev (react-dom.development.js:1338) at invokeGuardedCallback (react-dom.evolution.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.evolution.js:1338) at invokeGuardedCallback (react-dom.evolution.js:1195) at performWork (react-dom.development.js:12800) at batchedUpdates (react-dom.development.js:13244) at performFiberBatchedUpdates (react-dom.evolution.js:1646) at stackBatchedUpdates (react-dom.development.js:1637) at batchedUpdates (react-dom.evolution.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 (bearding) @ react-jsx-highcharts.min.js:1 value @ react-jsx-highcharts.min.js:one value @ react-jsx-highcharts.min.js:i 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.evolution.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.evolution.js:1338 invokeGuardedCallback @ react-dom.development.js:1195 performWork @ react-dom.development.js:12800 batchedUpdates @ react-dom.evolution.js:13244 performFiberBatchedUpdates @ react-dom.evolution.js:1646 stackBatchedUpdates @ react-dom.development.js:1637 batchedUpdates @ react-dom.evolution.js:1651 batchedUpdatesWithControlledComponents @ react-dom.development.js:1664 dispatchEvent @ react-dom.development.js:1874 BarSeries not working as bar, instead shows column
Hello,
I am trying to work with BarSeries, but its showing columns instead. What could exist the possible error?
"Cannot read property 'hoverSeries' of undefined" error when switching series types
I'thousand trying to switch between line and column displays dynamically, but I become 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 commencement switch, the series colour disappears, and then something's presumably wrong at that point. So, when I switch dorsum, I become the error.
I'm using React sixteen.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, four, 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 nautical chart <input type='checkbox' checked={this.state.lineChart} onChange={event => { this.setState({ lineChart: outcome.target.checked}); }}/> <HighchartsChart> <Nautical chart/> <XAxis /> <YAxis id="axis1"> {this.getSeries()} </YAxis> </HighchartsChart> </div> ); } } export default App; A question most Reflow()
Hey!
Showtime of, crawly work I really enjoy using your library its been working similar a amuse!
I am a rather new react user and I wanted to ask how you lot 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 backdrop, and so the nautical chart will become some default value w:777 h:400 f.x.
So I would need to trigger a reflow() after the nautical 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 accelerate and good piece of 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={information.tank} dataPoints={data.throughputChart} channelNames={data.channelName} /> And my stateless component is only a bones setup
const ThroughputChart = props => ( <div> <HighchartsChart> <Chart zoomType='x'/> <Legend layout="horizontal" marshal="middle" verticalAlign="bottom" /> <Title>{props.championship}</Title> <XAxis id="datetime_troughputchart" blazon="datetime"> ...etc onLoad on the Chart component doesn't work
Hi!
Get-go 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 take 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 return even is triggered but the load event is not.
Maybe there is something I didn't sympathise but this instance should piece of work (here is a pure highcharts example).
Tin can you have a wait?
Cheers!
Only last series updates when switching information
I'm trying to update a nautical chart using new information. Information technology contains multiple series---the number varies dynamically.
When I update the data, merely the last serial is changed. I've tried cloning the information to make certain it's not a "pass by reference" upshot, only that doesn't see to change things.
Here's some code that replicates the outcome. When the data is toggled, the first 2 series remain unchanged from their initial values, only the final series toggles.
Include documentation
I call back you should merge the /examples to master equally it'south acting as documentation, such equally #ane.
If the reason yous haven't done this is because you don't want them to be published to npm, why not add together a .npmignore file and list /examples in information technology? As well, you could add together /dist to the .gitignore
Loading component
I'd submit a pull request but thought it best to hash out with you first (and improve on my code
import React from 'react' import { provideChart } from 'react-jsx-highcharts' class Loading extends React.Component { showLoading() { const chart = this.props.getChart() nautical chart.showLoading('Loading...') } hideLoading() { const nautical chart = this.props.getChart() nautical chart.hideLoading() } render() { this.props.isLoading ? this.showLoading() : this.hideLoading() render false } } export default provideChart(Loading) And and then used like so:
<HighchartsChart> ... <Loading isLoading={this.props.isLoading} /> ... </HighchartsChart> Cannot read property 'destroy' of undefined
Good job on wrapping HighCharts, information technology is a pain to work with it otherwise!
I have version one.3.1, and I get an error fifty-fifty with the simplest example in the demos. It seems that somewhere the chart reference is deleted before the BaseChart component'due south componentWillUnmount event is chosen, thus the error.
Yous can investigate why this occurs, only for at present a simple solution is to check the existence of the nautical chart earlier calling destroy().
And so BaseChart.js componentWillUnmount should be
componentWillUnmount () { if(this.chart){ this.chart.destroy(); } this.chart.__destroyed = true; } This might result in some retention leakage, merely it might exist a expert quick fix for now.
Labels support
Hi,
thanks for your awesome task. I wonder is it possible to use highcharts labels ("https://lawmaking.highcharts.com/modules/series-characterization.js") with react-jsx-highcarts ? If you lot'll expect at the elementary instance on highcharts site and your example they are the aforementioned except for the labels for line graphs.
Some components using context straight unnecessarily
File missing in npm bundle: src/components/withHighcharts.js
NPM packet does non friction match git repo
Assuming cypher is rendering considering of the missing withHighcharts( App, Highcharts ); line causing an Mistake: withHighcharts is non a function
Ideological questions well-nigh arroyo to architecture
Hey Volition.
Great thought with this repo and good chore getting information technology out there on npm
I think that the mode you've "reengineered' Highcharts declaratively is clever. I can encounter that you're building a lightweight nautical chart case and and then adding the nested components (titles, axis, even series) as you move downward the DOM tree.
I'm wondering if you had other attempts or thinking to solve this?
A trouble (at that place are a few) with Highcharts is of form 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 telescopic 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, yous could supply Highcharts constructor once with a state shape that it needs to render. Subsequent renders would destroy and and so create new example.
I have been wrapping Highcharts with React and writing code similar this (which is "reasonable" but feels wrong, just feels better than the giant JSON blob):
<BubbleChart title="Projects by status - Commitment" serial={[ {x:32.3,y:23.3}, {x:eight.three,y:79.2}, {x:33.3,y:87.3}, ]} xAxis={{title:{text:'Per centum completed (%)'}}} yAxis={{title:{text:'Per centum spent (%)'}}} /> It's finer a 1:1 mapping to the JSON blob. Sigh.
But it could easily look like this and be more Reacty:
<BubbleChart> <Championship text="Projects by status - Delivery" /> <Serial data={[ {x:32.3,y:23.3}, {x:8.3,y:79.2}, {x:33.3,y:87.3}, ]} /> <Yaxis title={{text:'Per centum completed (%)'}} /> <Xaxis championship={{text:'Percent spent (%)'}} /> </BubbleChart> Just wondering about ideological questions around how you came to your solution and what was some of your thinking?
Tooltip formatter scope
Hey again,
Is there a recommended way to use the tooltip for correct admission to the chart telescopic? The telescopic of this is redefined to the parent in my experiments and therefore I'one thousand non able to make employ of custom tooltip formatting.
Thanks!
RangeSelector.Input focus
I tin't focus (click inside) neither on the examples or my own project's RangeSelector.Input. Later some try and failure i figured out that it is possible to click right just in the edges of the inputs, but not on other areas
huffmanamehionark.blogspot.com
Source: https://coder.social/whawker/react-jsx-highcharts
0 Response to "Cannot Read Property 'hoverseries' of Undefined React"
Postar um comentário