🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

highcharts-react-official

Package Overview
Dependencies
Maintainers
11
Versions
22
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

highcharts-react-official - npm Package Compare versions

Comparing version

3.2.1
to
3.2.2

2

package.json
{
"name": "highcharts-react-official",
"version": "3.2.1",
"version": "3.2.2",
"main": "./dist/highcharts-react.min.js",

@@ -5,0 +5,0 @@ "types": "./dist/highcharts-react.min.d.ts",

37

README.md
# Highcharts React
Official minimal [Highcharts](https://www.highcharts.com/) wrapper for React.
Official minimal [Highcharts](https://www.highcharts.com/) integration for React.
**Note: the beta of the upcoming v4 of the Highcharts React integration is
now available at [`@highcharts/react@next`](https://www.npmjs.com/package/@highcharts/react/)**
## Table of Contents

@@ -37,3 +40,3 @@ 1. [Getting started](#getting-started)

This wrapper also requires highcharts and react packages with the following versions installed in your project:
This integration also requires highcharts and react packages with the following versions installed in your project:

@@ -102,5 +105,5 @@ For version **2.x.x** :

import * as Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import { HighchartsReact } from 'highcharts-react-official';
// The wrapper exports only a default component that at the same time is a
// The integration exports only a default component that at the same time is a
// namespace for the related Props interface (HighchartsReact.Props) and

@@ -259,3 +262,3 @@ // RefObject interface (HighchartsReact.RefObject). All other interfaces

| `constructorType` | String | no | `'chart'` | String for [constructor method](https://www.highcharts.com/docs/getting-started/your-first-chart). Official constructors: <br>- `'chart'` for Highcharts charts <br>- `'stockChart'` for Highstock charts <br>- `'mapChart'` for Highmaps charts <br>- `'ganttChart'` for Gantt charts|
| `allowChartUpdate` | Boolean | no | `true` | This wrapper uses `chart.update()` method to apply new options to the chart when changing the parent component. This option allow to turn off the updating. |
| `allowChartUpdate` | Boolean | no | `true` | This integration uses `chart.update()` method to apply new options to the chart when changing the parent component. This option allow to turn off the updating. |
| `immutable` | Boolean | no | `false` | Reinitialises the chart on prop update (as oppose to `chart.update()`) - useful in some cases but slower than a regular update.|

@@ -340,3 +343,3 @@ | `updateArgs` | Array | no | `[true, true, true]` | Array of `update()`'s function optional arguments. Parameters should be defined in the same order like in native Highcharts function: `[redraw, oneToOne, animation]`. [Here](https://api.highcharts.com/class-reference/Highcharts.Chart#update) is a more specific description of the parameters.|

This wrapper contains tests for: testing environment, chart rendering and passing down container props.
This integration contains tests for: testing environment, chart rendering and passing down container props.
To run tests, type:

@@ -355,3 +358,3 @@

[Technical support](https://www.highcharts.com/support) will help you with Highcharts and with the wrapper.
[Technical support](https://www.highcharts.com/support) will help you with Highcharts and with the integration.

@@ -430,22 +433,16 @@ If you have a bug to report or an enhancement suggestion please submit [Issues](https://github.com/highcharts/highcharts-react/issues) in this repository.

To add a module, import and initialize it:
To add a module, import it like so:
```jsx
import Highcharts from 'highcharts'
import highchartsGantt from "highcharts/modules/gantt";
import highchartsGantt from "highcharts/modules/gantt"; // The Gantt module
import HighchartsReact from 'highcharts-react-official'
// init the module
highchartsGantt(Highcharts);
// Init the module (only for Highcharts v < 12)
if (typeof highchartsGantt === 'function') {
highchartsGantt(Highcharts);
}
```
alternative with `require`:
```jsx
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
require("highcharts/modules/variwide")(Highcharts);
```
### How to add React component to a chart's element?

@@ -459,5 +456,5 @@

It can be confusing, since React props are read-only, but Highcharts for performance reasons mutates the original data array. This behaviour is NOT changed by our wrapper. You need to pass a copy of your data to the wrapper if you want to prevent mutations.
It can be confusing, since React props are read-only, but Highcharts for performance reasons mutates the original data array. This behaviour is NOT changed by our integration. You need to pass a copy of your data to the integration if you want to prevent mutations.
Issue: https://github.com/highcharts/highcharts-react/issues/326 <br>
More discussion here: https://github.com/highcharts/highcharts/issues/4259

4

src/HighchartsReact.js

@@ -16,3 +16,5 @@ import React, {

const useIsomorphicLayoutEffect =
typeof window !== 'undefined' ? useLayoutEffect : useEffect;
typeof window !== 'undefined' && typeof window.document !== 'undefined'
? useLayoutEffect
: useEffect;

@@ -19,0 +21,0 @@ export const HighchartsReact = memo(forwardRef(