New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-jsx-highstock
Advanced tools
react-jsx-highstock - npm Package Compare versions
Comparing version 3.0.2 to 3.1.0
| { | ||
| "name": "react-jsx-highstock", | ||
| "version": "3.0.2", | ||
| "version": "3.1.0", | ||
| "description": "Highcharts (including Highstock) charts built using React components", | ||
@@ -61,3 +61,3 @@ "main": "dist/react-jsx-highstock.min.js", | ||
| "lodash-es": "^4.17.5", | ||
| "react-jsx-highcharts": "3.0.2" | ||
| "react-jsx-highcharts": "3.1.0" | ||
| }, | ||
@@ -64,0 +64,0 @@ "devDependencies": { |
109
README.md
@@ -7,2 +7,6 @@  | ||
| ## Introduction | ||
| A project for integrating [Highcharts](https://github.com/highcharts/highcharts) into a React app, with proper React components for each Highcharts/Highstock component. Inspired by [Recharts](https://github.com/recharts/recharts), but for Highcharts, obviously. | ||
| ## Why React JSX Highstock? | ||
@@ -20,33 +24,48 @@ | ||
| ## Upgrading from 2.x to 3.x | ||
| ## Installation | ||
| For the vast majority of cases, **if your chart works in v2 of React JSX Highstock it should work in v3 without any required changes**. | ||
| `npm install --save react-jsx-highstock` | ||
| Ok, so what about the minority of cases? | ||
| You'll need the peer dependencies too | ||
| ### Dropped React 15 support | ||
| `npm install --save react react-dom prop-types highcharts@^6.0.0` | ||
| v3 is built on top of the new Context API added in [React 16.3](https://reactjs.org/blog/2018/03/29/react-v-16-3.html#official-context-api), using the fantastic [create-react-context](https://www.npmjs.com/package/create-react-context) polyfill for previous React 16 versions. | ||
| ## Getting started | ||
| While polyfills for React 15 exist, I want to minimise the amount of use cases supported, going forward. | ||
| The intention of this library is to provide a very thin abstraction of Highcharts using React components. This has been achieved by passing Highcharts configuration options as component props. | ||
| ### Updates to the Higher Order components (Providers) | ||
| In the vast majority of cases, the name of the configuration option, and the name of the component prop are the same. | ||
| This is an advanced feature, but if this impacts you, [see the guide here](https://github.com/whawker/react-jsx-highcharts/wiki/Upgrading-from-2.x-to-3.x#updates-to-the-higher-order-components-providers) | ||
| #### Example | ||
| ## Upgrading from 1.x to 2.x | ||
| `<Tooltip />` component | ||
| ```jsx | ||
| <Tooltip padding={10} hideDelay={250} shape="square" split /> | ||
| ``` | ||
| This corresponds to the Highcharts' [`tooltip`](http://api.highcharts.com/highcharts/tooltip) configuration of | ||
| ```js | ||
| tooltip: { | ||
| enabled: true, // This is assumed when component is mounted | ||
| padding: 10, | ||
| hideDelay: 250, | ||
| shape: 'square', | ||
| split: true | ||
| } | ||
| ``` | ||
| We aim to pass all configuration options using the same name, so we use [Highcharts' documentation](http://api.highcharts.com/highcharts) to figure out how to achieve the same with React JSX Highcharts. | ||
| See the guide [here](https://github.com/whawker/react-jsx-highcharts/wiki/Upgrading-from-1.x-to-2.x) | ||
| ### Note: | ||
| ## Changelog | ||
| There are **two** exceptions to the above; | ||
| As of 2.1.0 Highcharts 6 is supported | ||
| #### Exception 1 | ||
| As of 2.x you are required to use the `withHighcharts` HOC to inject the Highcharts object (see below) | ||
| Where Highcharts **events** are concerned - instead of passing `events` as an object, we use the React convention *onEventName*. | ||
| As of 1.2.0 React JSX Highstock supports using [Immutable.js](https://facebook.github.io/immutable-js/) data structures as Series data. | ||
| ## Example | ||
| ```jsx | ||
| // Import Highstock from Highcharts | ||
| // import Highcharts from 'highcharts/highstock' | ||
| render () { | ||
@@ -95,8 +114,66 @@ return ( | ||
| // Provide Highcharts object for library to interact with | ||
| // Provide Highcharts (Highstock) object for library to interact with | ||
| export default withHighcharts(MyComponent, Highcharts); | ||
| ``` | ||
| ## Demos | ||
| [See here](https://whawker.github.io/react-jsx-highcharts/examples/index.html) | ||
| ## Documentation | ||
| In progress... [see here](https://github.com/whawker/react-jsx-highcharts/wiki). | ||
| ## Upgrading from 2.x to 3.x | ||
| For the vast majority of cases, **if your chart works in v2 of React JSX Highstock it should work in v3 without any required changes**. | ||
| Ok, so what about the minority of cases? | ||
| ### Dropped React 15 support | ||
| v3 is built on top of the new Context API added in [React 16.3](https://reactjs.org/blog/2018/03/29/react-v-16-3.html#official-context-api), using the fantastic [create-react-context](https://www.npmjs.com/package/create-react-context) polyfill for previous React 16 versions. | ||
| While polyfills for React 15 exist, I want to minimise the amount of use cases supported, going forward. | ||
| ### Updates to the Higher Order components (Providers) | ||
| This is an advanced feature, but if this impacts you, [see the guide here](https://github.com/whawker/react-jsx-highcharts/wiki/Upgrading-from-2.x-to-3.x#updates-to-the-higher-order-components-providers) | ||
| ## Upgrading from 1.x to 2.x | ||
| See the guide [here](https://github.com/whawker/react-jsx-highcharts/wiki/Upgrading-from-1.x-to-2.x) | ||
| ## Changelog | ||
| As of 3.x you are no longer required to use IDs for Axis, Series and PlotLines/Bands | ||
| As of 2.1.0 Highcharts 6 is supported | ||
| As of 2.x you are required to use the `withHighcharts` HOC to inject the Highcharts object (see below) | ||
| As of 1.2.0 React JSX Highstock supports using [Immutable.js](https://facebook.github.io/immutable-js/) data structures as Series data. | ||
| ## Common issues | ||
| **Uncaught TypeError: Cannot read property 'stockChart' of undefined** | ||
| You are probably importing High*charts* rather than High*stock*. Change you Highcharts import to... | ||
| ```js | ||
| import Highcharts from 'highcharts/highstock'; | ||
| ``` | ||
| **Highcharts error #17** | ||
| You likely need to add an extra Highcharts module to support the requested series type, this is usually Highcharts more. | ||
| ```js | ||
| import Highcharts from 'highcharts/highstock'; | ||
| import addHighchartsMore from 'highcharts/highcharts-more'; | ||
| addHighchartsMore(Highcharts); | ||
| ``` | ||
| ## More info | ||
| [See here](https://www.npmjs.com/package/react-jsx-highcharts) |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.63%
1040136
- Lines of code
- increased by1.72%
7166
- Number of lines in readme file
- increased by77%
177
Worsened metrics
- Number of low supply chain risk alerts
- increased by1.97%
155
- Number of medium supply chain risk alerts
- increased by1.52%
400
Dependency changes
+ Addedreact-jsx-highcharts@3.1.0(transitive)
- Removedreact-jsx-highcharts@3.0.2(transitive)
Updatedreact-jsx-highcharts@3.1.0