Directory

← Back

v-stack-bar

Stackbar web component

Author

Rating

Popularity

<100

Published on Vaadin Directory

<v-stack-bar>

<v-stack-bar> is a Polymer 3 web component for creating stack bar.

<v-stack-bar bars="[15,50,35]"></v-stack-bar>

<v-stack-bar bars="[15,50,35]" descriptions='["First element","Second element","Third element"]'></v-stack-bar>

<v-stack-bar bars="[20,30,50]" theme="lumo-success"></v-stack-bar>

<v-stack-bar bars="[1,20,80,140,52,33,674]" colors='["pink","green","brown","red","blue","black","red"]' background-colors='["blue","pink","green","black","brown"]'></v-stack-bar>

<v-stack-bar bars="[1,0,1]" colors='["pink","green","brown"]'></v-stack-bar>

Screenshot

Getting Started

To use <v-stack-bar> the only required attribute is bars which contains a array of values.

There are more optional attributes:

  • descriptions : array of text displayed on hover
  • theme : lumo-primary, lumo-error, lumo-success and lumo-shade. By default configure only 4 different values
  • colors: array of colors (to display the value inside the bar)
  • background-colors: array of background colors

If the value = 0 then the bar is not displayed (but the color is reserved for the value).

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • @polymer/polymer#^3.1.0
  • @webcomponents/webcomponentsjs#^1.0.20
Released
2019-06-12
Maturity
IMPORTED
License
BSD 3-clause "New" or "Revised" License

Compatibility

Framework
Polymer 3.0+
Browser
Browser Independent

v-stack-bar - Vaadin Add-on Directory

Stackbar web component v-stack-bar - Vaadin Add-on Directory
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/jcgueriaudv-stack-bar) # <v-stack-bar> [<v-stack-bar>](https://vaadin.com/directory/component/jcgueriaudv-stack-bar) is a [Polymer 3](http://polymer-project.org) web component for creating stack bar. ```html ``` ![Screenshot](https://raw.githubusercontent.com/jcgueriaud1/v-stack-bar/master/screenshot.png) # Getting Started To use <v-stack-bar> the only required attribute is bars which contains a array of values. There are more optional attributes: * descriptions : array of text displayed on hover * theme : lumo-primary, lumo-error, lumo-success and lumo-shade. By default configure only 4 different values * colors: array of colors (to display the value inside the bar) * background-colors: array of background colors If the value = 0 then the bar is not displayed (but the color is reserved for the value).
Online