stackbar

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

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

Links

• View on GitHub
• View on NPM

Compatibility