A simple mono stacked bar build with React

Jul 08, 2021
A simple mono stacked bar build with React


A simple mono stacked bar in React.

View Demo Download Source


npm install --save mono-stacked-bar # or using yarn yarn add mono-stacked-bar

Do not forget to include the css file !

  • Using ES6 with a module bundler like Webpack

    import "mono-stacked-bar/dist/index.css"

  • With good old reliable HTML tag

<head> <link href="node_modules/mono-stacked-bar/dist/index.css" rel="stylesheet" /> </head>


import React from "react" import MonoStackedBar from "mono-stacked-bar" import "mono-stacked-bar/dist/index.css" const App = () => { return <MonoStackedBar data={[10, 20, 15]} /> }

Required props

The data "props" can have two forms.

Note : caption are shown underneath the bar.

datanumber[][10, 20, 25]
dataBarData[]value: number (required)color: string (optional)caption: string (optional)[{ value: 10, color: "red", caption: "Some text" }, { value: 15, color: "orange" }]

Optional props

colorstringblueA default set of colors picked thanks to the randomcolor package
luminosity"bright" or "light" or "dark"darkDefault luminosity applied to randomcolor
displayLabelsbooleantrueShould data values be displayed inside bar sections
unitstring""The unit to be displayed after labels (%, $, etc)
widthnumber (px)Max width of the stacked bar (full-width by default)
heightnumber (px)20The height of the stacked bar
radiusnumber (px)10The border radius applied to the edges