React Launch Bar

Inspired by SpaceX's clean display for live launch telemetry.

Github Page

Prerequisites

You should be using NodeJS and ReactJS

Installation

React Launch Bar is available as an npm package.

npm install react-launch-bar [-S]

or

yarn add react-launch-bar

Usage

Using React Launch Bar is very straightforward. Once it is included in your project, you can use the components this way:

import React from 'react';
import { BarChart } from 'react-launch-bar';
 
let data = [
  { value: 40, max: 50, color: 'red'},
  { value: 20, max: 50, color: 'blue'},
  { value: 30, max: 50, color: 'green'},
  ...
]
 
const MyAwesomeReactComponent = () => (
  <BarChart title={'Points'} data={data} />
);
 
export default MyAwesomeReactComponent;

Customization

Key	Required	Type	Description
height	Y	Integer/String	This will set the total height of the chart.
width		Integer/String	This will set override the width of the chart.
value		Number	This will set override the width of the chart.
high		Number	This value determines the upper-region that fills red.
max		Number	This sets the ceiling of the chart's scale
title		String	Title of the chart.
titleStyle		Object	Style for title text (SVG Text).
progressStyle		Object	Style for progress bar (SVG rect)
style		Object	Style that is passed to SVG.
wrapStyle		Object	Style for wrapper div (div).