ngx-single-bar-chart

Demo

Installation

1. You can install ngx-singe-bar-chart using npm

npm install ngx-singe-bar-chart --save

2. Import the NgxSingleBarChartModule in your app main module:

import { NgxSingleBarChartModule } from "ngx-single-bar-chart";

// In your App's module:
imports: [NgxSingleBarChartModule];

Usage

Single bar chart

<ngx-single-bar-chart height="180px" width="75px" [value]="chart.value" [unit]="chart.unit" [minValue]="chart.minValue" [maxValue]="chart.maxValue" [limits]="chart.limits" lineSize="1px" [title]="chart.title" [fill]="true" fillOpacity="0.1">

Example to display multiple charts next to each other.

<ng-container *ngFor="let chart of charts">
  <ngx-single-bar-chart
    height="180px"
    width="75px"
    [value]="chart.value"
    [unit]="chart.unit"
    [minValue]="chart.minValue"
    [maxValue]="chart.maxValue"
    [limits]="chart.limits"
    lineSize="1px"
    [title]="chart.title"
    [fill]="true"
    fillOpacity="0.1">
  </ngx-single-bar-chart>
</ng-container>

Properties

name	types	default	Detail
height	String	150px	Height prop define the height of the bar diagram.
width	String	150px	Width prop define the width of the bar diagram.
value	Number	0	Actual value
unit	String	''	Unit of the value
minValue	Number	0	Minimal value that the graph should display
maxValue	Number	0	Maximal value that the graph should display
limits	any[]	[]	Array of limits
lineSize	String	1px	Line width of the limits
title	String	''	Title which appears above the diagram
fill	boolean	false	Fill section defined by the limit with corresponding color
fillOpacity	number	0	Opacity of the fill with a range of 0 to 1

Fill option is still under construction

Limits

The array limits expects an array of objects that contain a value key, which defines the limit value and a color key in hex format which subsequently defines the color of the graph.

Example

LIMITS: [
  { value: 0, color: "#5db457" },
  { value: 1000, color: "#fbd700" },
  { value: 1300, color: "#ea4218" },
];