react_histograph

react canvas histograph

Dynamic react graphic

Example

import HistoGraph from 'react_histograph';
<HistoGraph
    low={this.props.low} 
    high={this.props.high}
    optimum={this.props.optimum}
    min={this.props.min}
    max={this.props.max}

    lineWidth={2}
    width={128)}
    height={24}
    
    refresh={1000}
    historyLength={60 * 15}
    
    value={Math.round(this.state.value)}
/>

Parameters

• low, high, optimum, min, max are similar like these from HTML5's <meter> tag.
• lineWidth for stroke/line width in pixels (px)
• width and height is for the canvas size (px)
• refresh: interval when the graphic should write history, often same was refresh time. In some cases you might want to display less data then you receive.
• historyLength the number of samples/updates to display
• value: you value which will change over time. Hint: this.setState({value: newValue });
• desc : finally and optionally a nice little description

Example