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

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

Install

Link to this version
ImportedReleased 18 February 2019MIT License
Framework Support
Browser Independent
Install with
npm install @envo/stackbar"@1.0.3"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.3

Dependencies