Skip to content

Latest commit

 

History

History
67 lines (48 loc) · 2.47 KB

README.md

File metadata and controls

67 lines (48 loc) · 2.47 KB
Raw

mono-stacked-bar

A simple mono stacked bar

NPM JavaScript Style Guide

Examples

Edit mono-stacked-bar

Install

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>

Usage

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.

props type properties sample
data number[] [10, 20, 25]
data BarData[] 
value: number (required)
color: string (optional)
caption: string (optional)
 
[{ value: 10, color: "red", caption: "Some text" }, { value: 15, color: "orange" }]

Optional props

props type default description
color string blue A default set of colors picked thanks to the randomcolor package
labelColor string white Default color for all labels
displayLabels boolean true Should data values be displayed inside bar sections
unit string "" The unit to be displayed after labels (%, $, etc)
width number (px) Max width of the stacked bar (full-width by default)
height number (px) 20 The height of the stacked bar
radius number (px) 10 The border radius applied to the edges