react-native-charts

charts wrapper for react native

Installation

npm install react-native-charts-fabric

Usage

import { BarChartView, LineChartView, PieChartView } from 'react-native-charts-fabric';

// ... LineChart is the same as BarChart 

    <BarChartView
        xAxis={{
          max: 10,
          categories: yearLabels(),
          lineColor: '#124322',
          lineWidth: 5,
          labels: { style: { color: '#129922', fontSize: 12 } },
        }}
        yAxis={{
          min: 0,
          tickAmount: 6,
          labels: { style: { color: '#000000', fontSize: 10 } },
          gridLineColor: '#ffffff',
          gridLineWidth: 1,
        }}
        seriesData={{
          series: {
            data: [
              {
                color: '#455555',
                data: testSeries(),
              },
              {
                color: '#887777',
                data: testSeries(),
              },
            ],
          },
          colors: ['#455555', '#887777'],
        }}
        style={styles.box}
    />
// ... fake data
    function yearLabels() {
        const yearsData = [];
        for (var i = 0; i <= 20; i++) {
            yearsData.push((i + 2020).toString());
        }
        return yearsData;
    }

    function testSeries() {
        var seriesData = [];
        for (var i = 0; i <= 20; i++) {
            seriesData.push({
            x: i,
            y: Math.floor(Math.random() * 20),
            });
        }
  return seriesData;
}
// .....
    <PieChartView
        plotOptions={{
          pie: {
            borderWidth: 1,
            innerSize: 0,
          },
        }}
        seriesData={{
          series: {
            data: testPieSeries(),
          },
          colors: [
            '#455555',
            '#121212',
            '#887277',
            '#187777',
            '#587777',
            '#517227',
          ],
        }}
        style={styles.box}
      />

    function testPieSeries() {
    var seriesData = [];
        for (var i = 0; i <= 5; i++) {
            seriesData.push({
            color: '#882277',
            name: 'DataX',
            y: Math.floor(Math.random() * 20 + 1),
            });
        }
        return seriesData;
    }

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library