diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
index c36a6aa..6953a72 100644
--- a/src/components/Canvas.tsx
+++ b/src/components/Canvas.tsx
@@ -5,8 +5,8 @@ type StyleProps = {
 };
 
 type ElementProps = {
-  width: number;
-  height: number;
+  width: number | string;
+  height: number | string;
 };
 
 export const Canvas = forwardRef<HTMLCanvasElement, ElementProps & StyleProps>(
diff --git a/src/views/Orderbook.tsx b/src/views/Orderbook.tsx
index dd2ea1b..b72d2fd 100644
--- a/src/views/Orderbook.tsx
+++ b/src/views/Orderbook.tsx
@@ -166,8 +166,8 @@ export const Orderbook = ({
                 side="ask"
                 onMouseLeave={() => setHoveredRow(undefined)}
               >
-                <$HistogramCanvas ref={asksCanvasRef} width={300} height={numRows * ROW_HEIGHT} />
-                <$HistogramCanvas ref={asksHoverRef} width={300} height={numRows * ROW_HEIGHT} />
+                <$HistogramCanvas ref={asksCanvasRef} width="100%" height={numRows * ROW_HEIGHT} />
+                <$HistogramCanvas ref={asksHoverRef} width="100%" height={numRows * ROW_HEIGHT} />
 
                 {asksSlice.map((row: RowData, idx) =>
                   row.price ? (
@@ -195,8 +195,8 @@ export const Orderbook = ({
                 side="bid"
                 onMouseLeave={() => setHoveredRow(undefined)}
               >
-                <$HistogramCanvas ref={bidsCanvasRef} width={300} height={numRows * ROW_HEIGHT} />
-                <$HistogramCanvas ref={bidsHoverRef} width={300} height={numRows * ROW_HEIGHT} />
+                <$HistogramCanvas ref={bidsCanvasRef} width="100%" height={numRows * ROW_HEIGHT} />
+                <$HistogramCanvas ref={bidsHoverRef} width="100%" height={numRows * ROW_HEIGHT} />
 
                 {bidsSlice.map((row: RowData, idx) =>
                   row.price ? (