Introduction

This project demonstrates the use of the react-easy-graph package, which includes pre-built components for creating and rendering graph visualizations. The main purpose of this library is to help you to write charts in React applications without any pain.

Installation

NPM

NPM is the easiest and fastest way to get started using react-easy-graph. It is also the recommended installation method when building single-page applications (SPAs). It pairs nicely with a CommonJS module bundler such as Webpack.

npm install react-easy-graph

# or
yarn add react-easy-graph

Components

1. Bar Graph

• BarGraph
• Usage
• Demo

2. Area Graph

• AreaGraph
• Usage
• Demo

3. Pi Chart

• PiChart
• Usage
• Demo

License Information

• License

Collaborators

• Contributors

BarGraph

The BarGraph component renders a bar graph based on the provided data.

Props

Required Props:

• data: Array of objects with key and value properties
• colors: Array of string
• xAxisKeys: X-Axis key should always a string value
• yAxisKeys: Y-Axis key should always a numerical value
• width: Width should always in number
• height: height should always in number

Optional Props:

• [title]: String for the chart title
• [xAxisLabel]: String representing X axis label
• [yAxisLabel]: String representing Y axis label
• [showXAxisKeys]: Boolean to show/hide X axis keys
• [showYAxisValues]: Boolean to show/hide Y axis values
• [xAxisUnit]: String representing the unit of measurement for X axis
• [yAxisUnit]: String representing the unit of measurement for Y axis
• [xAxisUnitFormat]: String representing with unit of measurement for X axis
• [yAxisUnitFormat]: String representing with unit of measurement for Y axis
• [showXAxisDotLine]: Boolean to show/hide X axis dot line
• [showYAxisDotLine]: Boolean to show/hide Y axis dot line
• [dotLineSpacing]: Number represent the space between dots
• [showXAxisLine]: Boolean to show/hide X axis line
• [showYAxisLine]: Boolean to show/hide Y axis line

BarGraph Usage

Here's a basic example of how to use the BarGraph components from react-easy-graph;

import React from "react";
import { BarGraph } from "react-easy-graph";

function App() {

    // Sample colors format
    const colors = ["#8884d8", "#FF0000", "#008080", "#008000"]

    // Sample data format
    const data = [
        {
            name: 'Mens',
            amount: 700,
            insights: 400
        },
        {
            name: 'Womens',
            amount: 1100,
            insights: 400
        },
        {
            name: 'Kids',
            amount: 1000,
            insights: 400
        },
        {
            name: 'Electronics',
            amount: 700,
            insights: 400
        }
    ];

  return (
    <div>
      <BarGraph
        data={data}
        width={100}
        height={100}
        xAxisKeys={"name"}   
        yAxisKeys={"amount"}
        colors={colors}
        barSize={50}
        title="Insights For Products Purchase"
        showXAxisKeys={true}
        showYAxisValues={true}
        xAxisUnit="Category"
        yAxisUnit="INR"
        yAxisLabel="Total Amount"
        xAxisLabel="Products"
        yAxisUnitFormat="INR"
        xAxisUnitFormat="Brand"
        showXAxisDotLine={true}
        showYAxisDotLine={true}
        dotLineSpacing={5}
        showXAxisLine={true}
        showYAxisLine={true}/>
    </div>
  );
};


export default App;

BarGraphDemo

AreaGraph

The AreaGraph component renders a bar graph based on the provided data.

Props

Required Props:

• data: Array of objects with key and value properties
• xAxisKeys: X-Axis key should always a string value
• yAxisKeys: Y-Axis key should always a numerical value
• width: Width should always in number
• height: height should always in number

Optional Props:

• [title]: String for the chart title
• [xAxisLabel]: String representing X axis label
• [yAxisLabel]: String representing Y axis label
• [showXAxisKeys]: Boolean to show/hide X axis keys
• [showYAxisValues]: Boolean to show/hide Y axis values
• [xAxisUnit]: String representing the unit of measurement for X axis
• [yAxisUnit]: String representing the unit of measurement for Y axis
• [xAxisUnitFormat]: String representing with unit of measurement for X axis
• [yAxisUnitFormat]: String representing with unit of measurement for Y axis
• [showXAxisDotLine]: Boolean to show/hide X axis dot line
• [showYAxisDotLine]: Boolean to show/hide Y axis dot line
• [dotLineSpacing]: Number represent the space between dots
• [showXAxisLine]: Boolean to show/hide X axis line
• [showYAxisLine]: Boolean to show/hide Y axis line
• [areaColor]: Color code for the chart area color
• [areaStrokeColor]: Color code for the chart area stroke color

AreaGraph Usage

Here's a basic example of how to use the AreaGraph components from react-easy-graph;

import React from "react";
import { AreaGraph } from "react-easy-graph";

function App() {

    // Sample data format
    const data = [
        {
            name: 'Mens',
            amount: 1100,
        },
        {
            name: 'Womens',
            amount: 700,
        },
        {
            name: 'Kids',
            amount: 900,
        },
        {
            name: 'Electronics',
            amount: 600,
        },
        {
            name: 'Total',
            amount: 1000,
        }
    ];

  return (
    <div>
      <AreaGraph
        data={data}
        width={100}
        height={100}
        xAxisKeys={"name"}  
        yAxisKeys={"amount"} 
        yAxisLabel="Total Amount"
        xAxisLabel="Product"
        title="Area Chart"
        showXAxisKeys={true}
        showYAxisValues={true}
        xAxisUnit="Category"
        yAxisUnit="INR"
        yAxisUnitFormat="INR"
        xAxisUnitFormat="Brand"
        showXAxisDotLine={true}
        showYAxisDotLine={true}
        dotLineSpacing={10}
        showXAxisLine={true}
        showYAxisLine={true}
        areaColor = "#008000"
        areaStrokeColor = "#FF0000"/>
    </div>
  );
};


export default App;

AreaGraphDemo

PiChart

The PiChart component renders a bar graph based on the provided data.

Props

Required Props:

• data: Array of objects with key and value properties
• colors: Array of string
• keys: Keys should always a string value
• value: Value should always a numerical value
• width: Width should always in number
• height: height should always in number

Optional Props:

• [title]: String for the chart title
• [chartSize]: Number represent the chart size
• [innerCircleSize]: Number represent the inner space chart size
• [showTooltip]: Boolean to show/hide chart tooltip
• [toolTipKey]: String represent tooltip key
• [showLegend]: Boolean to show/hide legend
• [legendKey]: String represent legend key
• [legendPosition]: Position should be either top or bottom
• [legendLayout]: Layout should be either horizontal or verrtical

PiChart Usage

Here's a basic example of how to use the PiChart components from react-easy-graph;

import React from "react";
import { PiChart } from "react-easy-graph";

function App() {

    // Sample Colors format
    const colors = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

    // Sample data format
    const data = [
        { name: 'Group A', type: "Type A", value: 400 },
        { name: 'Group B', type: "Type B", value: 300 },
        { name: 'Group C', type: "Type C", value: 300 },
        { name: 'Group D', type: "Type D", value: 200 },
    ];

  return (
    <div>
      <PiChart
        data={data}
        width={100}
        height={100}
        keys={"name"}   
        value={"value"} 
        colors={picolors}
        title="Pi Charts" 
        chartSize={150}
        innerCircleSize={60}
        showTooltip={true}
        toolTipKey={"type"}
        showLegend={true}
        legendKey={"name"}
        legendPosition={"bottom"} 
        legendLayout={"horizontal"} 
        />
    </div>
  );
};


export default App;

PiChartDemo

License

This project is licensed under the MIT License.

Contributors

• Sonu Prasad