diff --git a/demo/src/demo/page/pixi.cljs b/demo/src/demo/page/pixi.cljs
index 0e28486..b4007b1 100644
--- a/demo/src/demo/page/pixi.cljs
+++ b/demo/src/demo/page/pixi.cljs
@@ -31,6 +31,7 @@
                          ;:close {:type :line}
                          {:type :line :col :daily-atr-lower :color "blue-3"}
                          {:type :line :col :daily-atr-upper :color "blue-7"}
+                         {:type :range :col [:daily-atr-lower :daily-atr-upper] :color "red-3"}
                          {:type :line :col :p0-low  :color "red-3"}
                          {:type :line :col :p1-low  :color "red-4"}
                          {:type :line :col :pweek-low :color "red-5"}
diff --git a/src/rtable/render/pixi/arearange.cljs b/src/rtable/render/pixi/arearange.cljs
new file mode 100644
index 0000000..874f1df
--- /dev/null
+++ b/src/rtable/render/pixi/arearange.cljs
@@ -0,0 +1,44 @@
+(ns rtable.render.pixi.arearange
+  (:require
+   [tech.v3.dataset :as tmlds]
+   ["pixi.js" :as pixi :refer [Application Container Graphics Text]]
+   [rtable.render.pixi.scale :refer [scale-bars scale-col]]
+    [rtable.color :refer [set-color]]
+   ))
+
+
+(defn add-bar [graphics step-px height col1 col2 color idx row]
+  (let [; x
+        bar-width step-px
+        x-center (* idx step-px)
+        x x-center
+        ; y
+        c1 (min height (max 0 (get row col1)))
+        c2 (min height (max 0 (get row col2)))
+        y (min c1 c2)
+        height (abs (- c1 c2))]
+    ; BAR    
+    (println "adding range-bar x: " x "y: " y 
+             " c1: " c1 " c2: " c2  " width: " bar-width " height: " height "color: " color)
+    (.rect graphics x y bar-width height)
+    (.fill  graphics (clj->js {:color color 
+                               :alpha 0.5
+                               }));
+    ;(.stroke graphics (clj->js {:width 1 :color 0xffffff}))
+    
+    ))
+
+(defn draw-range [state container height price-range col1 col2 color]
+  (let [{:keys [ds-visible step-px]} @state
+        color2 (set-color color)
+        ds (-> ds-visible
+               (scale-col height price-range col1)
+               (scale-col height price-range col2))
+        rows (tmlds/rows ds)
+        graphics (Graphics.)]
+    ;(println "scaled ds:")
+    ;(println ds-visible)
+    (doall (map-indexed (partial add-bar graphics step-px height col1 col2 color2) rows))
+    (.addChild container graphics)
+    (println "draw-bars done.")))
+
diff --git a/src/rtable/render/pixi/nav.cljs b/src/rtable/render/pixi/nav.cljs
index df47178..a189231 100644
--- a/src/rtable/render/pixi/nav.cljs
+++ b/src/rtable/render/pixi/nav.cljs
@@ -7,21 +7,44 @@
    [rtable.render.pixi.state :refer [adjust-visible]]
    [rtable.render.pixi.scale :refer [determine-range-bars determine-range-col]]
    [rtable.render.pixi.bars :refer [draw-bars]]
-   [rtable.render.pixi.line :refer [draw-line draw-points]]))
+   [rtable.render.pixi.line :refer [draw-line draw-points]]
+   [rtable.render.pixi.arearange :refer [draw-range]]
+   
+   ))
+
+(defn col-kw-ok? [state col]
+  (let [{:keys [ds-visible]} @state]
+    (get ds-visible col)))
+
+(defn col-vec-ok? [state col]
+   (println "col-ok vector: " col)
+  (reduce (fn [r c]
+            (and r (col-kw-ok? state c)))
+          true col))
+
+(defn col-ok? [state col]
+  (if (keyword? col)
+    (col-kw-ok? state col)
+    (col-vec-ok? state col)))
+ 
 
 (defn draw-series [state container height {:keys [type col color]}]
   (let [{:keys [ds-visible]} @state
-        ds-col (get ds-visible col)
         color (or color "blue-5")]
-    (if ds-col
+    (if (col-ok? state col)
       (let [price-range (determine-range-col ds-visible col)]
-            ;price-range (determine-range-bars ds-visible)
         (case type 
-              :line
-              (draw-line state container height price-range col color)
-              :point
-              (draw-points state container height price-range col color)
-              (println "unsupported type: " type)
+          :line
+          (draw-line state container height price-range col color)
+          :point
+          (draw-points state container height price-range col color)
+          :range 
+          (let [[col1 col2] col
+                price-range (determine-range-bars ds-visible)]
+           (draw-range state container height price-range col1 col2 color))
+          ;
+          
+          (println "unsupported type: " type)
           ))
       (do (println "cannot draw linechart. col missing: " col)
           (println "cols: " (tmlds/column-names ds-visible))))))