react-satti-chart
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

REACT SATTI CHART

A simple Bar Chart component for ReactJS

Intall

You can get it on NPM installing react-satti-chart component as a project dependency.

npm install react-satti-chart

Screen Shot

Screen Shot

Setup

You'll need to add react-satti-chart to your app.js or any other component where you want to use loader. So that, the <BarChart /> components will be accessible in your application.

...
import { BarChart } from "react-satti-chart";
...
function App() {
	const [data, setData] = useState([])
	useEffect(() => {
		setData([
			{
				label: "Jan",
				value: 120
			},
			{
				label: "Feb",
				value: 160
			},
			{
				label: "Mar",
				value: 190
			},
			{
				label: "Apr",
				value: 60
			},
			{
				label: "May",
				value: 90
			}
		])
	}, [])

	return (
		<div className="App">
			<BarChart
				width="400"
				height="500"
				data={data}
				barColor="purple"
				barWidth={50}
			/>
		</div>
	);
}

Options

  • data: Array - it should be label & values of array ex([{label: "A", value: 80}])
  • width: string - width of the canvas element;
  • height: string - height of the canvas element;
  • isDarkMode: booloan - default false;
  • showValue: booloan - default true, if false values will not visible in top of the each bar
  • showYIndicatorLines: booloan - default true, if false Y indicator lines will not visible
  • lineColor: string - line color of X & Y
  • barColor: string - applies color of each bar
  • textColor: string - applies color of every text
  • increamentY: number - increaments of Y axis
  • barWidth: number - width of the bar size

Keywords

Install

DownloadsWeekly Downloads

0

Version

1.0.1

License

ISC

Unpacked Size

53.7 kB

Total Files

15

Last publish

Collaborators

  • karthisgk