# react-native-highcharts-wrapper

> Easy to use wrapper to utilise Highcharts within react-native applications.

Latest version **0.1.1** (published 2020-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-highcharts-wrapper
pnpm add react-native-highcharts-wrapper
yarn add react-native-highcharts-wrapper
bun add react-native-highcharts-wrapper
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2020-04-24 |
| First published | 2020-04-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | socrypto |
| Maintainers | socrypto |
| Keywords | react-native-component, react-component, react-native, ios, android, highcharts, graphs, wrapper, WebView |

## Links

- npm: https://www.npmjs.com/package/react-native-highcharts-wrapper
- Homepage: https://github.com/socrypto/react-native-highcharts-wrapper#readme
- Issues: https://github.com/socrypto/react-native-highcharts-wrapper/issues
- npm.io page: https://npm.io/package/react-native-highcharts-wrapper

## Dependencies (1)

- [react-native-webview](https://npm.io/package/react-native-webview.md) 8.1.1

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2020-04-24
- 0.1.0 — 2020-04-14
- 0.0.5 — 2020-04-14
- 0.0.4 — 2020-04-14
- 0.0.3 — 2020-04-14
- 0.0.2 — 2020-04-13
- 0.0.1 — 2020-04-13

## README

# react-native-highcharts-wrapper

Easy to use wrapper to utilise Highcharts within react-native applications.

## Getting Started

### `npm install react-native-highcharts-wrapper`

or

### `yarn add react-native-highcharts-wrapper`

## Example

```javascript
import ChartView from 'react-native-highcharts-wrapper';

export default function HighChart() {
  const Highcharts = 'Highcharts';
  const conf = {
    chart: {
      type: 'spline',
      animation: Highcharts.svg,
      marginRight: 10,
      events: {
        load: function () {
          const series = this.series[0];
          setInterval(function () {
            const x = new Date().getTime(),
              y = Math.random() * (13000 - 12000) + 12000;
            series.addPoint([x, y], true, true);
          }, 2000);
        },
      },
    },
    title: {
      text: 'Live Bitcoin Price',
    },
    xAxis: { type: 'datetime', tickPixelInterval: 150 },
    yAxis: {
      title: { text: 'Price USD' },
      plotLines: [{ value: 0, width: 1, color: '#CCC' }],
    },
    tooltip: {
      formatter: function () {
        return (
          '<b>' +
          this.series.name +
          '</b><br/>' +
          Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +
          '<br/>' +
          Highcharts.numberFormat(this.y, 2)
        );
      },
    },
    exporting: { enabled: false },
    series: [
      {
        name: 'BTC',
        data: (function () {
          // generate an array of random data
          const data = [];
          const time = new Date().getTime();
          for (let i = -19; i <= 0; i += 1) {
            data.push({
              x: time + i * 2000,
              y: Math.random() * (13000 - 12000) + 12000,
            });
          }
          return data;
        })(),
      },
    ],
  };

  const options = {
    global: { useUTC: false },
    lang: { decimalPoint: ',', thousandsSep: '.' },
  };

  return <ChartView style={{ height: 350 }} config={conf} options={options} />;
}
```

## Props

| Prop            | Required |                                                                                                 Description |
| --------------- | :------: | ----------------------------------------------------------------------------------------------------------: |
| config          |   true   | Highcharts configuration [See the docs.>>](http://www.highcharts.com/docs/getting-started/your-first-chart) |
| stock           |  false   |                                                         Use Highstock instead of Highcharts - Default false |
| style           |  false   |                                                                  Style object to be passed into the WebView |
| heatMap         |  false   |                                                                                 Use HeatMap - Default false |
| options         |  false   |                                                                Pass global and lang options into Highcharts |
| enableRadiusPie |  false   |                                                   Import radius pie library from highcharts - Default false |
| more            |  false   |                                                               Import highstock-more library - Default false |
| guage           |  false   |                                                        Import gauge library from highcharts - Default false |

---
_Source: https://npm.io/package/react-native-highcharts-wrapper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._