# chart-reaction

> React component library for charting

Latest version **0.1.22** (published 2018-02-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install chart-reaction
pnpm add chart-reaction
yarn add chart-reaction
bun add chart-reaction
```

## 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.22 |
| Published | 2018-02-10 |
| First published | 2018-01-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 197.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jason Clements |
| Maintainers | entreprenerder |

## Links

- npm: https://www.npmjs.com/package/chart-reaction
- npm.io page: https://npm.io/package/chart-reaction

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^16.2.0

## Recent versions

- 0.1.22 (latest) — 2018-02-10
- 0.1.21 — 2018-02-10
- 0.1.20 — 2018-02-10
- 0.1.19 — 2018-02-10
- 0.1.18 — 2018-02-09
- 0.1.17 — 2018-02-09
- 0.1.16 — 2018-02-09
- 0.1.15 — 2018-02-09
- 0.1.14 — 2018-02-08
- 0.1.13 — 2018-02-08
- 0.1.12 — 2018-02-08
- 0.1.11 — 2018-02-08
- 0.1.10 — 2018-02-08
- 0.1.9 — 2018-02-08
- 0.1.8 — 2018-02-08
- … 8 more at https://npm.io/package/chart-reaction/versions

## README

# Chart Reaction

[![GitHub issues](https://img.shields.io/github/issues/entreprenerder/chart-reaction.svg)](https://github.com/entreprenerder/chart-reaction/issues) [![Twitter](https://img.shields.io/twitter/url/https/github.com/entreprenerder/chart-reaction.svg?style=social)](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Fentreprenerder%2Fchart-reaction)

NOTE: `chart-reaction` is in beta. Right now the `LineChart` component exists. There will be more features and more variety of charts coming soon. Thank you for your patience :)

## A JS Chart Library built for React!

**Self contained components**

No external js or css links are required. All settings are built within the component(like it should be) allowing you to take advantage of React's component life cycle and virtual DOM for any chart updates based on user interaction.

**Simplicty**

No need to write endless configuration code just to get a chart to render. Configure your chart through `props` and just use the ones you need.

## Line Chart

### Getting Started
<!-- prettier-ignore -->
```JSX
import React from 'react';
import {LineChart} from 'chart-reaction';

//This will render a line by itself w/o any grid, axis, or labels.
export const Example = (props) => {
  const lineChartData = [
    {label: "Jan",value: 15},
    {label: "Feb",value: 10},
    {label: "Mar",value: 10},
    {label: "Apr",value: 5},
    {label: "May",value: 10},
    {label: "Jun",value: 5},
    {label: "Jul",value: 8},
    {label: "Aug",value: 12},
    {label: "Sep",value: 9},
    {label: "Oct",value: 17}
  ];

  return <LineChart data={lineChartData} />;
}
```
NOTE: The component does not require any props to work:
```JSX
//This will render an empty 400px X 200px box.
//This can be useful as a placeholder if there is not yet data to create a line.
<LineChart />
```
### Example w/ More Settings
<!-- prettier-ignore -->
```JSX
import React from 'react';
import {LineChart} from 'chart-reaction';

export const Example = (props) => {

  const lineChartData = [
    {label: "Jan",value: 15},
    {label: "Feb",value: 10},
    {label: "Mar",value: 10},
    {label: "Apr",value: 5},
    {label: "May",value: 10},
    {label: "Jun",value: 5},
    {label: "Jul",value: 8},
    {label: "Aug",value: 12},
    {label: "Sep",value: 9},
    {label: "Oct",value: 17}
  ];

  const areaColor = {
    direction: 'vertical',
    colors: [
      {
        color: '#4A90E2',
        offset: 0
      },
      {
        color: 'transparent',
        offset: 100
      }
    ]
  }

  const lineShadow = {
    spread: 7,
    blur: 5,
    color: 'rgba(0,0,0,0.5)',
    xOffset: 0,
    yOffset: 10
  };

  return (
    <div>
      <LineChart
        yName={null}
        xName={null}
        yNameColor={null}
        xNameColor={null}
        showXGrid={true}
        showYGrid={false}
        xGridColor='rgba(0,0,0,0.3)'
        yGridColor='rgba(0,0,0,0.3)'
        xGridWidth={null}
        yGridWidth={null}
        showXAxis={true}
        showYAxis={true}
        xAxisColor='#000'
        yAxisColor='#000'
        xAxisWidth={2}
        yAxisWidth={2}
        showXLables={true}
        xLabelColor='#000'
        yLabelColor='#000'
        showYLables={true}
        showValues={true}
        valueColor='#000'
        width={800}
        height={400}
        dots={true}
        dotColor='#fff'
        dotBorderColor='#4A90E2'
        responsive={false}
        yIncrement={2}
        yMax={20}
        yMin={0}
        areaColor={areaColor}
        paddingTop={50}
        paddingLeft={90}
        paddingRight={100}
        paddingBottom={50}
        lineColor='#4A90E2'
        lineWidth={3}
        lineCurved={false}
        lineBlur={null}
        lineShadow={lineShadow}
        lineRoundedEnds={true}
        hideLine={false}
        backgroundColor={null}
        data={lineChartData}
        animation={true}
      />
    </div>
  );
}
```

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