@UiReact

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

UiLinearChart

Package: @uireact/charts

^v3.2.5

Linear chart that represents the percentage of a current value inside a limit value.

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/charts

Usage

This component takes 2 values: currentValue and limitValue, the limitValue is the 100% of the chart and the current value represents how much of the limitValue is covered, if the current value is bigger than the limit then it will default to 100%.


  <UiLinearChart
    data={{
      current: {
        value: 15,
      },
      limit: {
        value: 30,
      },
      title: 'Demo',
    }}
  />

With labels and rounded

The limit label appears at the chart's top right corner, the current label renders underneath the current edge by default.


  <UiLinearChart
    rounded
    data={{
      current: {
        label: '35,000 pts used',
        value: 35000,
      },
      limit: {
        label: '50,000 pts',
        value: 50000,
      },
    }}
  />

With static label position and none animated

When static label is used the label for the current value will be static at the bottom of the chart. The animated prop can be set up to false if you don't want the animation on load.


  <UiLinearChart
    animated={false}
    data={{
      current: {
        label: '300 lbs',
        value: 300,
        labelStatic: true,
      },
      limit: {
        label: '1000 lbs',
        value: 1000,
      },
    }}
  />

With theme colors

We can use the color categories for grabbing a specific theme color for the chart


  <UiLinearChart
    data={{
      current: {
        color: 'error',
        label: '60%',
        value: 60,
        labelStatic: true,
      },
      limit: {
        color: 'positive',
        label: '80% battery',
        value: 80,
      },
      title: 'Demo with color',
    }}
  />

With custom colors

The custom colors supports hex and rgb colors


  <UiLinearChart
    data={{
      current: {
        color: 'rgb( 28, 225, 127)',
        label: '60%',
        value: 60,
        labelStatic: true,
      },
      limit: {
        color: '#BE3708',
        label: '80% battery',
        value: 80,
      },
      title: 'Demo with color',
    }}
  />

Data prop

Definiton of UiLinearChartData

type UiLinearChartData = {
  title?: string;
  limit: {
    color?: string | ColorCategory;
    label?: string;
    value: number;
    labelStatic?: boolean;
  };
  current: {
    color?: string | ColorCategory;
    label?: string;
    value: number;
  };
};