Neapolitan Pizza Margherita
    Wondering what’s next for npm?Check out our public roadmap! »

    react-jsx-highmaps

    2.2.1 • Public • Published

    React JSX Highmaps

    Build Status npm version dependencies Status

    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 prop-types highcharts@^8.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

    <Tooltip /> component

    <Tooltip padding={10} hideDelay={250} shape="square" split />

    This corresponds to the Highcharts' tooltip configuration of

    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.

    Note:

    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

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

    This would correspond to the Highcharts configuration

    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

    <Title>Some Text Here</Title>

    This would correspond to the Highcharts configuration

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

    Example

    // import Highmaps from 'highcharts/highmaps' - Import Highmaps from Highcharts
    // import { Fetch } from 'react-request'
    
    const MyMapChart = (props) => (
      <HighmapsProvider Highcharts={Highmaps}>
        <Fetch url="https://code.highcharts.com/mapdata/custom/europe.geo.json">
          {({ fetching, failed, data }) => {
            if (fetching) return <div>Loading…</div>
            if (failed) return <div>Failed to load map.</div>
    
            if (data) {
              return (
                <HighchartsMapChart map={data}>
                  <Title>Nordic countries</Title>
    
                  <MapSeries
                    data={[
                      ['is', 1],
                      ['no', 1],
                      ['se', 1],
                      ['dk', 1],
                      ['fi', 1]
                    ]}
                    dataLabels={{
                      enabled: true,
                      color: '#FFFFFF',
                      format: '{point.name}'
                    }}
                  />
    
                  <MapNavigation>
                    <MapNavigation.ZoomIn/>
                    <MapNavigation.ZoomOut/>
                  </MapNavigation>
    
                  <Tooltip/>
    
                  <Credits/>
                </HighchartsMapChart>
              )
            }
    
            return null
          }}
        </Fetch>
      </HighmapsProvider>
    );

    More info

    See here

    Install

    npm i react-jsx-highmaps

    DownloadsWeekly Downloads

    850

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    49.5 kB

    Total Files

    27

    Last publish

    Collaborators

    • avatar
    • avatar