diff --git a/src/lib/components/vegachartv2/VegaChartV2.component.tsx b/src/lib/components/vegachartv2/VegaChartV2.component.tsx
index fe43cb4332..4b33a77243 100644
--- a/src/lib/components/vegachartv2/VegaChartV2.component.tsx
+++ b/src/lib/components/vegachartv2/VegaChartV2.component.tsx
@@ -75,7 +75,7 @@ function VegaChartInternal(
   const currentTheme = useTheme();
   const themeConfig = {
     config: {
-      background: currentTheme.backgroundLevel1,
+      background: 'transparent',
       axis: {
         labelColor: currentTheme.textSecondary,
         titleColor: currentTheme.textSecondary,
@@ -87,7 +87,8 @@ function VegaChartInternal(
         font: 'Lato',
       },
       view: {
-        stroke: 'transparent',
+        stroke: currentTheme.border,
+        strokeWidth: 0.5,
         fill: currentTheme.backgroundLevel1,
       },
       // the headers provide a title and labels for faceted plots.
@@ -265,7 +266,6 @@ function VegaChartInternal(
       ref={vegaDOMInstance}
       style={{
         width: '100%',
-        border: `${currentTheme.backgroundLevel3} 1px solid`,
       }}
     >
       <VegaTooltipTheme />
diff --git a/stories/barchart.stories.tsx b/stories/barchart.stories.tsx
index c19ededc22..38227d26f5 100644
--- a/stories/barchart.stories.tsx
+++ b/stories/barchart.stories.tsx
@@ -114,13 +114,7 @@ export default {
   title: 'Components/Data Display/Charts/BarChart',
   component: BarChart,
   decorators: [
-    (story: Component) => (
-      <Wrapper
-        style={{ minHeight: '30vh', padding: '3rem', backgroundColor: 'white' }}
-      >
-        <SyncedCursorCharts>{story()}</SyncedCursorCharts>
-      </Wrapper>
-    ),
+    (story: Component) => <SyncedCursorCharts>{story()}</SyncedCursorCharts>,
   ],
   argTypes: {
     data: {