Skip to content

Latest commit

 

History

History
380 lines (313 loc) · 17.8 KB

README.md

File metadata and controls

380 lines (313 loc) · 17.8 KB

react-native-ez-charts

A lightweight and customizable React Native chart library for creating stunning visualizations. This library supports Bar Charts, Line Charts, and Pie Charts with various customization options.

Installation

Install the package using npm:

npm install react-native-svg react-native-ez-charts

Features

  • Bar Charts: Simple and Multi-Bar Charts
  • Line Charts: Simple and Stacked Line Charts
  • Pie Charts: Inscribed and Offset Pie Charts
  • Customizable animations, gradients, tooltips, and more.

Usage Examples

Simple Bar Chart

import React from 'react';
import {BarChart} from 'react-native-ez-charts';

const SimpleBarChart = () => (
  <BarChart
    catergoricalAxis={['Jan', 'Feb', 'March', 'April', 'May']}
    numericalAxes={[
      {
        data: [100, 233, 322, 122, 34],
        strokeColor: 'blue',
      },
    ]}
    barWidth={100}
    chartHeight={500}
    barGap={20}
    categoricalAxisHeight={50}
    dashedLineGap={20}
    dashedLineWidth={20}
    categoricalLabelTilt={0}
    variant="gradient"
    endOpacity={0.5}
    animationType="timing"
    duration={500}
  />
);

export default SimpleBarChart;

Alt text

Multi Bar Chart

import React from 'react';
import {BarChart} from 'react-native-ez-charts';

const MultiBarChart = () => (
  <BarChart
    catergoricalAxis={['Jan', 'Feb', 'March', 'April']}
    numericalAxes={[
      {
        data: [100, 233, 322, 122],
        strokeColor: 'orange',
      },
      {
        data: [70, 263, 222, 122],
        strokeColor: 'pink',
      },
      {
        data: [170, 223, 212, 212],
        strokeColor: 'grey',
      },
    ]}
    barWidth={100}
    chartHeight={500}
    barGap={20}
    categoricalAxisHeight={50}
    dashedLineGap={20}
    dashedLineWidth={20}
    categoricalLabelTilt={0}
    variant="gradient"
    endOpacity={0.5}
    animationType="timing"
    duration={500}
  />
);

export default MultiBarChart;

Alt text

Simple Line Chart

import React from 'react';
import {LineChart} from 'react-native-ez-charts';

const SimpleLineChart = () => (
  <LineChart
    catergoricalAxis={['Jan', 'Feb', 'March', 'April']}
    numericalAxes={[
      {
        data: [100, 133, 122, 122],
        strokeColor: 'red',
        strokeWidth: 2,
      },
    ]}
    xUnit={100}
    chartHeight={300}
    categoricalAxisHeight={50}
    dashedLineGap={20}
    dashedLineWidth={20}
    categoricalLabelTilt={0}
    variant="area"
    showToolTip={true}
    toolTipColor="black"
  />
);

export default SimpleLineChart;

Alt text

Stacked Line Chart

import React from 'react';
import {LineChart} from 'react-native-ez-charts';

const StackedLineChart = () => (
  <LineChart
    catergoricalAxis={['Jan', 'Feb', 'March', 'April', 'May']}
    numericalAxes={[
      {
        data: [100, 133, 122, 122, 121],
        strokeColor: 'pink',
        strokeWidth: 2,
      },
      {
        data: [90, 73, 82, 92, 90],
        strokeColor: 'red',
        strokeWidth: 2,
      },
      {
        data: [20, 43, 42, 42, 69],
        strokeColor: 'grey',
        strokeWidth: 2,
      },
    ]}
    xUnit={100}
    chartHeight={500}
    categoricalAxisHeight={50}
    dashedLineGap={20}
    dashedLineWidth={20}
    categoricalLabelTilt={0}
    variant="area"
    showToolTip={true}
    toolTipColor="black"
  />
);

export default StackedLineChart;

Alt text

Inscribed Pie Chart

import React from 'react';
import {PieChart} from 'react-native-ez-charts';

const InscribedPieChart = () => (
  <PieChart
    size={180}
    data={[
      {
        value: 30,
        color: '#FF5733',
        label: {value: 'Mango', color: 'black'},
      },
      {
        value: 20,
        color: '#33FF57',
        label: {value: 'Orange', color: 'black'},
      },
      {value: 50, color: '#3357FF', label: {value: 'Peas', color: 'black'}},
      {value: 10, color: 'gray', label: {value: 'Avocado', color: 'black'}},
      {
        value: 20,
        color: '#33FF57',
        label: {value: 'Banana', color: 'black'},
      },
    ]}
    variant="inscribed"
    labelFontSize={15}
  />
);

export default InscribedPieChart;

Alt text

Offset Pie Chart

import React from 'react';
import {PieChart} from 'react-native-ez-charts';

const OffsetPieChart = () => (
  <PieChart
    size={250}
    data={[
      {
        value: 30,
        color: '#FF5733',
        label: {value: 'Mango', color: 'black'},
      },
      {
        value: 20,
        color: '#33FF57',
        label: {value: 'Orange', color: 'black'},
      },
      {value: 50, color: '#3357FF', label: {value: 'Peas', color: 'black'}},
      {value: 10, color: 'gray', label: {value: 'Avocado', color: 'black'}},
      {
        value: 20,
        color: '#33FF57',
        label: {value: 'Banana', color: 'black'},
      },
    ]}
    variant="offset"
    labelFontSize={15}
  />
);

export default OffsetPieChart;

Alt text

BarChart Props

The BarChart component allows you to render a customizable bar chart. Below is a table describing all the available props:

Prop Name Type Required Default Value Description
numericalAxes NumericalAxisType[] Yes N/A An array of objects defining the data and stroke color for each numerical axis.
catergoricalAxis string[] Yes N/A An array of strings defining the categorical axis labels.
barWidth number Yes N/A The width of each bar in the chart.
barGap number Yes N/A The gap between bars in the chart.
chartHeight number No N/A The height of the chart.
minChartWidth number No N/A The minimum width of the chart.
categoricalAxisHeight number No N/A The height of the categorical axis.
categoricalLabelTilt TiltAngle No N/A The tilt angle of the categorical labels.
dashedLineWidth number No N/A The width of dashed lines in the chart.
dashedLineGap number No N/A The gap between dashed lines in the chart.
dashedLineColor string No N/A The color of dashed lines in the chart.
categoricalLabelColor string No N/A The color of the categorical labels.
numericalLabelColor string No N/A The color of the numerical labels.
categoricalLabelFontSize number No N/A The font size of the categorical labels.
numericalLabelFontSize number No N/A The font size of the numerical labels.
variant 'gradient' | 'default' No 'default' The visual variant of the chart.
animationType AnimationType No N/A The type of animation applied to the chart.
friction number No N/A The friction value for the animation (if applicable).
tension number No N/A The tension value for the animation (if applicable).
duration number No N/A The duration of the animation in milliseconds.
easing (value: number) => number No N/A A custom easing function for the animation.
endOpacity number No N/A The ending opacity for the gradient variant of the chart.

NumericalAxisType Interface

The NumericalAxisType defines the structure of the numericalAxes prop:

export interface NumericalAxisType {
  data: Array<number>;
  strokeColor: string;
}

LineChart Props

Here is a table summarizing the properties and types for the LineChart and CategoricalAxis components:

LineChart Props

Prop Type Description
catergoricalAxis Array<string> Labels for the categorical axis.
numericalAxes NumericalAxisType[] Array of numerical axis configurations, including data and styles.
chartHeight number (optional) Height of the chart.
minChartWidth number (optional) Minimum width of the chart.
modifyToolTipLabel (x: string, y: number) => string (optional) Function to modify the tooltip label.
xUnit number (optional) Unit spacing for the x-axis.
showToolTip boolean (optional) Whether to show tooltips on the chart.
categoricalAxisHeight number (optional) Height of the categorical axis.
categoricalLabelTilt TiltAngle (optional) Angle for tilting the categorical labels.
dashedLineWidth number (optional) Width of dashed grid lines.
dashedLineGap number (optional) Gap between dashed grid lines.
dashedLineColor string (optional) Color of dashed grid lines.
variant `'area' 'blank'` (optional)
categoricalLabelColor string (optional) Color of the categorical axis labels.
numericalLabelColor string (optional) Color of the numerical axis labels.
categoricalLabelFontSize number (optional) Font size for categorical labels.
numericalLabelFontSize number (optional) Font size for numerical labels.
toolTipColor string (optional) Color of the tooltip.

NumericalAxisType

Property Type Description
data Array<number> Data points for the numerical axis.
strokeColor string Color of the line representing the data.
strokeWidth number Width of the line representing the data.

CategoricalAxis Props

Prop Type Description
categoricalAxis Array<string> Labels for the categorical axis.
xUnit number Unit spacing for the categorical axis.
height number (optional) Height of the categorical axis.
tiltAngle TiltAngle (optional) Angle to tilt the labels for better readability.
labelColor string (optional) Color of the categorical labels.
fontSize number (optional) Font size of the categorical labels.

TiltAngle

Value Description
0 No tilt (horizontal).
5-90 Angle in degrees to tilt labels for readability.

PieChart Props

Prop Type Description
data Slice[] Array of slices representing the pie chart. Each slice contains value, color, and optionally a label.
variant `"offset" "inscribed"` (optional)
size number Diameter of the pie chart.
labelFontSize number (optional) Font size for the labels inside the pie chart.
gradient boolean (optional) Whether to apply a gradient effect to the chart.
endOpacity number (optional) Opacity at the end of the gradient (if enabled).

Slice Interface

Property Type Description
value number Value of the slice, determines its size proportion in the chart.
color string Color of the slice.
label { value: string, color: string } (optional) Optional label for the slice, with text and color.

License

This library is licensed under the MIT License.