Skip to content

nextbitlabs/two-stacked-bar

Repository files navigation

<two-stacked-bar>

Latest Release Published on webcomponents.org

Web component implementation of a two-stacked-bar.

Usage

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

<head>
  <script type="module">
    import "https://cdn.skypack.dev/@nextbitlabs/two-stacked-bar";
  </script>
  <style>
    /*
      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 */
    }
  </style>
</head>

Use the custom element:

<body>
  <two-stacked-bar
    gap="2"
    bar-width="2"
    width="100"
    height="100"
    margin="20"
  ></two-stacked-bar>
</body>

Set the data to plot:

<script>
  const element = document.querySelector("two-stacked-bar");
  element.data = [[1, [12, 4]], [2, [3, 10]], [3, [5, 25]]];
</script>

Please have a look at the demo.

License

MIT