diff --git a/src/components/Bar.tsx b/src/components/Bar.tsx
index 324868d..bb00024 100644
--- a/src/components/Bar.tsx
+++ b/src/components/Bar.tsx
@@ -2,8 +2,10 @@ import styled from "styled-components";
 import { ZoneIndex } from "make-workout";
 
 export type BarProps = {
-  width: string;
-  height: string;
+  // Percentage of total workout length
+  durationPercentage: number;
+  // Percentage of maximum intensity in workout
+  intensityPercentage: number;
   zone: ZoneIndex;
 };
 
@@ -19,10 +21,11 @@ const zoneColorsMap: Record<ZoneIndex, string> = {
 export const Bar = styled.div<BarProps>`
   display: inline-block;
   border-radius: 10px;
-  margin-right: 0.1%;
   vertical-align: bottom;
-  height: ${(props) => props.height};
+  margin-right: 0.1%;
+  /* exclude 0.1% margin from bar width */
+  width: ${(props) => props.durationPercentage - 0.1}%;
+  height: ${(props) => props.intensityPercentage}%;
   background: ${(props) => zoneColorsMap[props.zone]};
-  width: ${(props) => props.width};
   transition: width 0.1s, height 0.1s, background-color 0.1s;
 `;
diff --git a/src/components/WorkoutPlot.tsx b/src/components/WorkoutPlot.tsx
index 1bca8ec..7b383ee 100644
--- a/src/components/WorkoutPlot.tsx
+++ b/src/components/WorkoutPlot.tsx
@@ -5,8 +5,8 @@ import { BarProps, Bar } from "./Bar";
 
 const toBarProps = (interval: Interval, workoutDuration: Duration, maxIntensity: Intensity): BarProps => ({
   zone: intensityToZoneIndex(interval.intensity),
-  width: `${interval.duration.seconds / workoutDuration.seconds * 100 - 0.1}%`,
-  height: `${interval.intensity.value / maxIntensity.value * 100}%`,
+  durationPercentage: interval.duration.seconds / workoutDuration.seconds * 100,
+  intensityPercentage: interval.intensity.value / maxIntensity.value * 100,
 });
 
 const Plot = styled.div`