ENVO-STACKBAR DEMO

A simple web component that displays a 100% stacked bar chart.

Usage

Option 1.)

Pass values as attribute:

      
          <envo-stackbar id="envo-stackbar-0" values='[{"value":24,"title":"Yes","styles":{ "backgroundColor": "green", "color":"#fff" }},{"value":12,"title":"No","styles":{ "backgroundColor": "red" }}]'></envo-stackbar>
      
    

Option 2.)

Pass values as property

      
        const envoStackbarElement = document.querySelector('#envo-stackbar-1');
      
        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'
            }
          },
        ]