# Documentation

This package provides both a bar chart and a circle chart for use in your projects.

react-charts-sm is a React package that provides two components: CircleChart and Bar. These components are designed to visualize data in a simple and customizable way.

# Usage
### The CircleChart component renders a circular progress chart.
1. percentage (number, required):
    The percentage value to be displayed on the chart.

2. radius (number, required): defines the radius of the circle.

3. strokeWidth (number, required): defines the width of the stroke.
    
4. label (string, optional):
    A label to display below the chart. This is commented out in the current implementation but can be included as needed.

5. progressColor (string, optional):
    The color of the progress stroke. Default is #00f.


#### Example:-
    import { CircleChart } from "react-charts-sm"; 

    <CircleChart 
        radius={50}
        strokeWidth={20}
        percentage={75}
        label="Completion"
        progressColor="#4caf50" 
    />
 
### The Bar component renders a vertical bar chart.

1. value (number, required):
    The percentage value for the bar fill.

2. label (string, optional):
    A label to display below the bar.

3. barColor (string, optional):
    The color of the bar container. Default is #ccc.

4. barFillColor (string, optional):
    The color of the bar fill. Default is #f00.

#### Example
    import { Bar } from "react-charts-sm";
    <Bar 
      value={50} 
      label="Progress" 
      barColor="#ddd" 
      barFillColor="#ff5722" 
    />


## License
react-charts-sm is available under MIT license.