Update readme

nextbitlabs · Jul 20, 2021 · 7dcdc82 · 7dcdc82
1 parent 0a0995c
commit 7dcdc82
Showing 1 changed file with 44 additions and 0 deletions.
diff --git a/readme.md b/readme.md
@@ -8,6 +8,50 @@ Web component implementation of a two-stacked-bar.
 
 ## Usage
 
+Import `two-stacked-bar` and set CSS custom properties:
+
+```html
+<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:
+
+```html
+<body>
+  <two-stacked-bar
+    gap="2"
+    bar-width="2"
+    width="100"
+    height="100"
+    margin="20"
+  ></two-stacked-bar>
+</body>
+```
+
+Set the data to plot:
+
+```html
+<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](https://xbbzw.csb.app/).
 
 ## License