chart background

dist/index.d.ts

@@ -62,6 +62,7 @@ declare abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
     protected renderYAxis(): void;
     protected renderY1Axis(): void;
     protected renderCrosshair(): void;
+    updateBackground(): void;
     protected addEvents(): void;
     protected initBrush(): void;
     protected filterByKeyEvent(key: KeyEvent): () => boolean;

dist/types.d.ts

@@ -45,6 +45,9 @@ export declare type Options = {
         orientation?: CrosshairOrientation;
         color?: string;
     };
+    background?: {
+        color?: string;
+    };
     timeInterval?: {
         timeFormat?: TimeFormat;
         count?: number;

src/index.ts

@@ -98,6 +98,9 @@ const DEFAULT_OPTIONS: Options = {
       format: AxisFormat.NUMERIC
     }
   },
+  background: {
+    color: 'none',
+  },
   crosshair: {
     orientation: CrosshairOrientation.VERTICAL,
     color: 'red'
@@ -172,11 +175,11 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
   }
 
   public render(): void {
-    this.renderAxes();
-    this.renderGrid();
-
     this.renderClipPath();
     this.addEvents();
+    this.updateBackground();
+    this.renderAxes();
+    this.renderGrid();
 
     this.renderCrosshair();
     this.renderMetricsContainer();
@@ -395,6 +398,12 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
     }
   }
 
+  updateBackground(): void {
+    // TODO: background should be a separate component
+    const background = this.chartContainer.select('.overlay') || this.chartContainer.select('.custom-overlay');
+    background.attr('fill', this.options.background.color);
+  }
+
   protected addEvents(): void {
     // TODO: refactor for a new mouse/scroll events
     const panKeyEvent = this.options.zoomEvents.mouse.pan.keyEvent;

src/types.ts

@@ -37,6 +37,9 @@ export type Options = {
     orientation?: CrosshairOrientation;
     color?: string;
   }
+  background?: {
+    color?: string;
+  };
   timeInterval?: {
     timeFormat?: TimeFormat;
     count?: number;