react-jsx-highmaps

!React JSX Highmaps

 !npm version 

Introduction

A project for integrating Highmaps into a React app, with proper React components for each Highmaps component. Inspired by Recharts, but for Highmaps, obviously.

Installation

npm install --save react-jsx-highmaps

You'll need the peer dependencies too

npm install --save react react-dom highcharts@^11.0.0

Licensing

React JSX Highmaps is free to use, however Highcharts itself requires a license for commercial use. Highcharts license FAQs.

Getting started

The intention of this library is to provide a very thin abstraction of Highmaps using React components. This has been achieved by passing configuration options as component props.

In the vast majority of cases, the name of the configuration option, and the name of the component prop are the same.

#### Example

component

``jsx

`

This corresponds to the 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 to figure out how to achieve the same with React JSX Highcharts.

$3

There are two exceptions to the above;

#### Exception 1

Where Highcharts events are concerned - instead of passing events as an object, we use the React convention _onEventName_.

#### Example

`jsx
id="my-series"
data={myData}
onHide={this.handleHide}
onShow={this.handleShow}
/>
`

This would correspond to the Highcharts configuration

`js
series: [
{
type: 'mapbubble',
id: 'my-series',
data: myData,
events: { hide: this.handleHide, show: this.handleShow }
}
];
`

#### Exception 2

text configuration options are passed as a React child

#### Example

`jsx

`

This would correspond to the Highcharts configuration

`js
title: {
text: 'Some Text Here';
}
`

Example

`jsx
// import Highmaps from 'highcharts/highmaps' - Import Highmaps from Highcharts
// import { Fetch } from 'react-request'

const MyMapChart = (props) => (


{({ fetching, failed, data }) => {
if (fetching) return

return null
}}


);
``

More info

See here