https://github.com/nextbitlabs/two-stacked-bar

Web-component implementation of a two-stacked-bar.
https://github.com/nextbitlabs/two-stacked-bar

chart stacked-bar web-component

Last synced: 2 months ago
JSON representation

Web-component implementation of a two-stacked-bar.

• Host: GitHub
• URL: https://github.com/nextbitlabs/two-stacked-bar
• Owner: nextbitlabs
• License: mit
• Created: 2021-07-19T14:25:47.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-07-20T06:13:42.000Z (almost 4 years ago)
• Last Synced: 2024-04-24T15:44:22.749Z (about 1 year ago)
• Topics: chart, stacked-bar, web-component
• Language: JavaScript
• Homepage:
• Size: 378 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# <two-stacked-bar>

![Latest Release](https://badgen.net/github/release/nextbitlabs/two-stacked-bar) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/two-stacked-bar)

Web component implementation of a two-stacked-bar.



## Usage

Import `two-stacked-bar` and set CSS custom properties:

```html

  

    import "https://cdn.skypack.dev/@nextbitlabs/two-stacked-bar";

  

  

    /*

      CSS custom properties penetrate the Shadow DOM.

      They are useful to provide custom styling.

    */

    two-stacked-bar {

      --color-top: #999; /* default #999 */

      --color-bottom: #333; /* default #333 */

      --background: #eee; /* default transparent */

    }

  

```

Use the custom element:

```html

  

```

Set the data to plot:

```html

  const element = document.querySelector("two-stacked-bar");

  element.data = [[1, [12, 4]], [2, [3, 10]], [3, [5, 25]]];

```

Please have a look at the [demo](https://xbbzw.csb.app/).

## License

MIT