Directory

← Back

stackbar

A simple webcomponent to show a 100% stacked bar chart.

Author

Rating

Popularity

<100

Published on webcomponents.org

ENVO-Stackbar

A simple webcomponent to show a 100% stacked bar chart.

DEMO

https://enricovogt.github.io/stackbar/index.html

Installation

npm i @envo/stackbar

DEMO

Usage

<script>
  const envoStackbarElement = document.querySelector('#envo-stackbar');

  envoStackbarElement.showLegend = true;
  envoStackbarElement.values = [
    {
      value:12,
      title:"1",
      styles: { 
        backgroundColor: 'red' 
      }
    },
    {
      value:12,
      title:"2",
      styles: {
        backgroundColor: 'indianred'
      }
    },
    {
      value:4,
      title:"3",
      styles: {
        backgroundColor: 'orange'
      }
    },
    {
      value:5,
      title:"4",
      styles: {
        backgroundColor: 'lightgreen'
      }
    },
    {
      value:24,
      title:"5",
      styles: {
        backgroundColor: 'green'
      }
    },
  ];
</script>
<envo-stackbar id="envo-stackbar"></envo-stackbar>

License

MIT

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

Released
2019-02-18
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Browser
Browser Independent

stackbar - Vaadin Add-on Directory

A simple webcomponent to show a 100% stacked bar chart. stackbar - Vaadin Add-on Directory
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@envo/stackbar) # ENVO-Stackbar A simple webcomponent to show a 100% stacked bar chart. ## DEMO https://enricovogt.github.io/stackbar/index.html ## Installation ``` npm i @envo/stackbar ``` ## DEMO ## Usage ```html ``` ## License MIT
Online