reactnativesimplecharts

ReactNativeSimpleCharts

A simple charts with gradient for react-native Also you can use multiple charts. Customize charts, axis, height, scale, steps OY, colors and fill chart section with gradient. Chart automatically scale OY axis data and make them normal for user, so you didn't see 12.34 or 0.23123 values.

Installation

1. npm install react-native-simple-charts --save or yarn add react-native-simple-charts
2. react-native link react-native-simple-charts

Usage

Simple Charts

import Chart from 'react-native-simple-charts'
...

  render() {
    let greenChartProps = {
      "strokeWidth": 2,
      "renderPoints": true,
      "strokeColor": 'green',
      "pointColor1": 'green',
      "pointColor2": 'green',
    }
    let blueChartProps = {
      "strokeWidth": 2,
      "renderPoints": true,
      "strokeColor": 'blue',
      "pointColor1": 'blue',
      "pointColor2": 'blue',
    }
    let data = [
      {
        "chart": [
          {
            "x": '1',
            "y": 10,
            "props": greenChartProps
          },
          {
            "x": '2',
            "y": 45,
            "props": greenChartProps
          },
          {
            "x": '3',
            "y": 10,
            "props": greenChartProps
          },
          {
            "x": '4',
            "y": 55,
            "props": greenChartProps
          },
          {
            "x": '5',
            "y": 20,
            "props": greenChartProps
          },
          {
            "x": '6',
            "y": 65,
            "props": greenChartProps
          },
        ],
      },
      {
        "chart": [
          {
            "x": '1',
            "y": 89,
            "props": blueChartProps
          },
          {
            "x": '2',
            "y": 67,
            "props": blueChartProps
          },
          {
            "x": '3',
            "y": 55,
            "props": blueChartProps
          },
          {
            "x": '4',
            "y": 23,
            "props": blueChartProps
          },
          {
            "x": '5',
            "y": 44,
            "props": blueChartProps
          },
          {
            "x": '6',
            "y": 55,
            "props": blueChartProps
          },
        ],
      }
    ]

    return (
      <Chart
          data={data}
          stepsOY={5}
      />
    );
  }

Gradient Chart

import Chart from 'react-native-simple-charts'
...

  render() {
    let greenChartProps = {
      "strokeWidth": 2,
      "renderPoints": true,
      "strokeColor": 'green',
      "pointColor1": 'green',
      "pointColor2": 'green',
    }
    let data = [
      {
        "chart": [
          {
            "x": '1',
            "y": 10,
            "props": greenChartProps
          },
          {
            "x": '2',
            "y": 45,
            "props": {
              ...greenChartProps,
              fillGradient: true,
              gradientEndColor: 'green',
              gradientStartColor: 'yellow'
            }
          },
          {
            "x": '3',
            "y": 10,
            "props": {
              ...greenChartProps,
              fillGradient: true,
              gradientEndColor: 'green',
              gradientStartColor: 'yellow'
            }
          },
          {
            "x": '4',
            "y": 55,
            "props": greenChartProps
          },
          {
            "x": '5',
            "y": 20,
            "props": greenChartProps
          },
          {
            "x": '6',
            "y": 65,
            "props": greenChartProps
          },
        ],
      }
    ]

    return (
      <Chart
          data={data}
          stepsOY={5}
          axisTextColorActive={'red'}
          activeAxisXTextArray={['2', '3', '4']}
      />
    );
  }

Props

    data: React.PropTypes.array.isRequired,
    height: React.PropTypes.number,
    width: React.PropTypes.number,
    backgroundColor: React.PropTypes.any,
    gradientOpacityStart: React.PropTypes.string,
    gradientOpacityEnd: React.PropTypes.string,
    axisTextColor: React.PropTypes.any,
    axisTextOpacity: React.PropTypes.number,
    activeAxisXTextArray: React.PropTypes.array, // you can set unique text color for special OX axis values
    axisTextColorActive: React.PropTypes.any, //there is this color
    hideXAxe: React.PropTypes.bool,
    hideYAxe: React.PropTypes.bool,
    axisStrokeWidth: React.PropTypes.number,
    axisColor: React.PropTypes.any,
    axisOpacity: React.PropTypes.number,
    pointRadius: React.PropTypes.number, // chart point radius
    axisLinesColor: React.PropTypes.string, // horizontal and vertical chart lines
    axisLinesOpacity: React.PropTypes.number,
    axisLinesWidth: React.PropTypes.number,
    renderAxisXSectors: React.PropTypes.bool,
    axisXSectorsColor: React.PropTypes.string,
    axisXSectorsOpacity: React.PropTypes.number,
    renderAxisXLines: React.PropTypes.bool, // vertical lines
    renderAxisYLines: React.PropTypes.bool, //horizontal lines
    leftPanelBG: React.PropTypes.any, // OY axis text backgroundColor
    renderBlur: React.PropTypes.bool, // IOS only blured OY axis text
    blurProps: React.PropTypes.any,
    leftPanelWidth: React.PropTypes.number,
    stepsOY: React.PropTypes.number, // number of section on axis Y
    scaleXAxis: React.PropTypes.number, // define chart condensation
    maxYValue: React.PropTypes.number // set max OY value that can be rendered

## Default Props

    height: 150,
    backgroundColor: 'white',
    stepsOY: 4,
    axisTextColor: 'black',
    axisTextOpacity: 1,
    axisColor: 'black',
    axisOpacity: 1,
    axisLinesOpacity: 1,
    axisLinesWidth: 1,
    axisStrokeWidth: 2,
    axisLinesColor: 'black',
    scaleXAxis: 5.5,
    renderAxisXLines: true,
    renderAxisYLines: true,
    leftPanelWidth: 50,
    leftPanelBG: 'white',
    renderBlur: true,
    gradientOpacityStart: '0.0',
    gradientOpacityEnd: '0.55'

data

An array of points. This should be provided with an array of objects. Note if you want fill with gradient special chart parts you need to use only one chart with gradient.

[
      {
        "chart": [
          {
            "x": '1',
            "y": 10,
            "props": {
              "strokeWidth": 2, // chart stroke width
              "strokeColor": 'green',
              "renderPoints": true,
              "pointColor1": 'green', // this define 1:10 point color
              "pointColor2": 'green', // this define 2:Y point color (next point)
              "fillGradient": false, // if you set true then gradient will fill area from 1 to 2 OX value
              "gradientStartColor": 'green',
              "gradientEndColor": 'green',
            }
          },
          ...
        ]
      },
  ...
]

Questions or suggestions?

Feel free to open an issue