Neptunium, Promethium, Manganese

    @nextbitlabs/two-stacked-bar

    1.0.3 • Public • Published

    <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

    Install

    npm i @nextbitlabs/two-stacked-bar

    DownloadsWeekly Downloads

    14

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    5.68 kB

    Total Files

    4

    Last publish

    Collaborators

    • nextbit
    • riccardoscalco
    • nkint