diff --git a/src/app/renderer/index.tsx b/src/app/renderer/index.tsx
index 311842800..e60cadc1b 100644
--- a/src/app/renderer/index.tsx
+++ b/src/app/renderer/index.tsx
@@ -745,6 +745,9 @@ export function renderGraphicalElementSVG(
 
       return (
         <ChartComponent
+          viewHeight={component.height}
+          viewWidth={component.width}
+          scale={1}
           key={options.key}
           chart={component.chart}
           dataset={component.dataset}
diff --git a/src/container/chart_component.tsx b/src/container/chart_component.tsx
index 4713fd6c3..77b6beeca 100644
--- a/src/container/chart_component.tsx
+++ b/src/container/chart_component.tsx
@@ -18,7 +18,6 @@ import {
   renderSVGDefs,
 } from "../app/renderer";
 import { RenderEvents } from "../core/graphics";
-import { MappingType } from "../core/specification";
 
 export { DataSelection };
 
@@ -49,6 +48,10 @@ export interface ChartComponentProps {
   onGlyphMouseLeave?: GlyphEventHandler;
   onGlyphContextMenuClick?: GlyphEventHandler;
   renderEvents?: RenderEvents;
+
+  scale: number;
+  viewHeight: number;
+  viewWidth: number;
 }
 
 export interface ChartComponentState {
@@ -147,28 +150,6 @@ export class ChartComponent extends React.Component<
       this.recreateManager(newProps);
       changed = true;
     }
-    if (
-      !this.manager.chart.mappings.width ||
-      newProps.width !=
-        (this.manager.chart.mappings.width as Specification.ValueMapping).value
-    ) {
-      this.manager.chart.mappings.width = {
-        type: MappingType.value,
-        value: newProps.width,
-      } as Specification.ValueMapping;
-      changed = true;
-    }
-    if (
-      !this.manager.chart.mappings.height ||
-      newProps.height !=
-        (this.manager.chart.mappings.height as Specification.ValueMapping).value
-    ) {
-      this.manager.chart.mappings.height = {
-        type: MappingType.value,
-        value: newProps.height,
-      } as Specification.ValueMapping;
-      changed = true;
-    }
     return changed;
   }
 
@@ -298,20 +279,21 @@ export class ChartComponent extends React.Component<
     );
     renderOptions.selection = this.props.selection;
     const gfx = renderGraphicalElementSVG(this.state.graphics, renderOptions);
+
+    const transform = `translate(${this.props.viewWidth / 2}, ${
+      this.props.viewHeight / 2
+    }) scale(${this.props.scale})`;
+
     const inner = (
       <>
         <defs>{renderSVGDefs(this.state.graphics)}</defs>
-        <g
-          transform={`translate(${this.props.width / 2}, ${
-            this.props.height / 2
-          })`}
-        >
+        <g transform={transform}>
           {this.props.onGlyphClick ? (
             <rect
-              x={-this.props.width / 2}
-              y={-this.props.height / 2}
-              width={this.props.width}
-              height={this.props.height}
+              x={-this.props.viewWidth / 2}
+              y={-this.props.viewHeight / 2}
+              width={this.props.viewWidth}
+              height={this.props.viewHeight}
               style={{
                 fill: "none",
                 pointerEvents: "all",
@@ -353,8 +335,8 @@ export class ChartComponent extends React.Component<
           <svg
             x={0}
             y={0}
-            width={this.props.width}
-            height={this.props.height}
+            width={this.props.viewWidth}
+            height={this.props.viewHeight}
             className={this.props.className}
             style={{
               userSelect: "none",
diff --git a/src/container/container.tsx b/src/container/container.tsx
index 3aa031ebb..6084a383d 100644
--- a/src/container/container.tsx
+++ b/src/container/container.tsx
@@ -24,6 +24,9 @@ import {
 import { TemplateInstance } from "./chart_template";
 
 export interface ChartContainerComponentProps {
+  scale: number;
+  viewHeight: number;
+  viewWidth: number;
   chart: Specification.Chart;
   dataset: Dataset.Dataset;
   defaultAttributes?: Prototypes.DefaultAttributes;
@@ -178,6 +181,9 @@ export class ChartContainerComponent extends React.Component<
   public render() {
     return (
       <ChartComponent
+        scale={this.props.scale}
+        viewWidth={this.props.viewWidth}
+        viewHeight={this.props.viewHeight}
         ref={(e) => (this.component = e)}
         chart={this.props.chart}
         dataset={this.props.dataset}
@@ -319,11 +325,20 @@ export class ChartContainer extends EventEmitter {
     setFormatOptions(options);
   }
 
-  public reactMount(width: number = 1200, height: number = 800) {
+  public reactMount(
+    width: number = 1200,
+    height: number = 800,
+    scale: number = 1,
+    viewWidth: number = 1200,
+    viewHeight: number = 800
+  ) {
     this.width = width;
     this.height = height;
     return (
       <ChartContainerComponent
+        scale={scale}
+        viewWidth={viewWidth}
+        viewHeight={viewHeight}
         ref={(e) => (this.component = e)}
         chart={this.chart}
         dataset={this.dataset}