diff --git a/examples/demo.html b/examples/demo.html
index 7ec1ac9..9938c2a 100755
--- a/examples/demo.html
+++ b/examples/demo.html
@@ -14,9 +14,9 @@
         document.getElementById('chart'),
         [
           { target: 'test11', datapoints: getData(), matchedKey: 'm-1', color: 'red', colorFormatter: (data) => ['green', 'yellow'][data.rowIndex]  },
-          // { target: 'test12', datapoints: [[100, 10], [200, 20], [300, 10]], matchedKey: 'm-1', color: 'green' },
-          // { target: 'test21', datapoints: [[130, 10], [230, 26], [330, 15]], matchedKey: 'm-2', color: 'yellow'},
-          // { target: 'test22', datapoints: [[130, 10], [230, 27], [330, 10]], matchedKey: 'm-2', color: 'blue' },
+          { target: 'test12', datapoints: [[100, 10], [200, 20], [300, 10]], matchedKey: 'm-1', color: 'green' },
+          { target: 'test21', datapoints: [[130, 10], [230, 26], [330, 15]], matchedKey: 'm-2', color: 'yellow'},
+          { target: 'test22', datapoints: [[130, 10], [230, 27], [330, 10]], matchedKey: 'm-2', color: 'blue' },
         ],
         {
           usePanning: false,
@@ -24,8 +24,8 @@
             x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; } },
             y: { format: 'custom', invert: false, range: [0, 30], valueFormatter: (value) => { return value + '%'; } }
           },
-          stacked: false,
-          matching: false,
+          stacked: true,
+          matching: true,
           maxBarWidth: 20,
           minBarWidth: 4,
           zoomEvents: {
diff --git a/src/models/data_processor.ts b/src/models/data_processor.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/types.ts b/src/types.ts
index f6903e6..7aff2de 100755
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,28 +1,39 @@
 import { Serie, Options } from '@chartwerk/core';
 
-export type BarSerieParams = {
-  matchedKey: string;
-  colorFormatter: (serie: BarSerie) => string;
+type ValueX = (number | string);
+type ValueY = number;
+
+export type BarSerieAdditionalParams = {
+  datapoints: [ValueX, ...ValueY[]]; // [x, y, y, y, ..., y], multiple y values as stacked bars
+  annotation?: {
+    color: string;
+    size: {
+      max?:  number; // type always SizeType.PX
+      min?: number; // type always SizeType.PX
+    }
+  }
+  opacityFormatter?: (data: RowValues) => number;
+  colorFormatter?: (data: any) => string;
 }
-export type BarSerie = Serie & Partial<BarSerieParams>;
+export type BarSerie = Serie & BarSerieAdditionalParams;
+
+
 export type BarAdditionalOptions = {
-  renderBarLabels?: boolean;
-  stacked?: boolean;
-  barWidth?: number; // width in x axis unit
-  maxBarWidth?: number; // in px
-  minBarWidth?: number; // in px
-  maxAnnotationSize?: number; // in px TODO: move to annotaions
-  minAnnotationSize?: number; // in px
-  matching?: boolean;
-  opacityFormatter?: (data: RowValues) => number;
-  annotations?: {
-    key: string, // matchedKey from series
-     // TODO: add  enum with "triangle" option 
-    color: string,
-  }[];
+  group: { // for more than 1 serie and discrete.enable == true
+    by: { x: ValueX[] }; // union bars as one group, see examples/demo-group-by.html
+    size: number; // type always SizeType.PERCENT
+  };
+  discrete: {
+    enable: boolean; // if false -> render bars as time chart | group will not work, see examples/demo-non-discrete.html
+    barWidth: {
+      estimated?: { value: number, type?: SizeType };
+      max?: number; // type always SizeType.PX
+      min?: number; // type always SizeType.PX
+    }
+  };
   eventsCallbacks?: {
     contextMenu?: (data: any) => void;
-  }
+  };
 }
 export type BarOptions = Options & Partial<BarAdditionalOptions>;
 export type RowValues = {
@@ -32,3 +43,9 @@ export type RowValues = {
   colors: (string | ((data: any) => string))[],
   serieTarget: string[],
 }
+
+export enum SizeType {
+  UNIT = 'unit', // in units of X or Y values
+  PX = 'px',
+  PERCENT = 'percent', // from 0 to 100
+}