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.