diff --git a/react/package-lock.json b/react/package-lock.json
index 4695095..bba5ee0 100644
--- a/react/package-lock.json
+++ b/react/package-lock.json
@@ -9,6 +9,7 @@
             "version": "1.0.88",
             "license": "MIT",
             "dependencies": {
+                "@canvas-sdk/charts": "^0.5.3",
                 "@headlessui/react": "^2.0.4",
                 "chroma-js": "^2.4.2",
                 "dompurify": "^3.1.0",
@@ -2205,6 +2206,14 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/@canvas-sdk/charts": {
+            "version": "0.5.3",
+            "resolved": "https://registry.npmjs.org/@canvas-sdk/charts/-/charts-0.5.3.tgz",
+            "integrity": "sha512-0mKyDR4+zUXfdB++PzNff10Mb7LtlnOzaCmsUUUb2onlN0MBrwR8xZP7HC3MvFKi77nAJkoi0kyg0M4bZHXnTw==",
+            "peerDependencies": {
+                "react": "^18.3.1"
+            }
+        },
         "node_modules/@csstools/cascade-layer-name-parser": {
             "version": "1.0.11",
             "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.11.tgz",
diff --git a/react/package.json b/react/package.json
index 1a55e64..fb19937 100644
--- a/react/package.json
+++ b/react/package.json
@@ -78,6 +78,7 @@
         "webpack-dev-server": "^4.15.1"
     },
     "dependencies": {
+        "@canvas-sdk/charts": "^0.5.3",
         "@headlessui/react": "^2.0.4",
         "chroma-js": "^2.4.2",
         "dompurify": "^3.1.0",
diff --git a/react/src/SvgChart.tsx b/react/src/SvgChart.tsx
index dca7dda..7a90cc3 100644
--- a/react/src/SvgChart.tsx
+++ b/react/src/SvgChart.tsx
@@ -2,12 +2,9 @@ import React, { ReactElement, RefObject, useEffect, useLayoutEffect, useRef, use
 import { ChartData } from 'src/__rust_generated__/ChartData';
 import { HorizontalXAxis, HorizontalYAxis, XAxis, YAxis } from 'src/charts/Axis';
 import { HorizontalGrid } from 'src/charts/HorizontalGrid';
-import { LineChart } from 'src/charts/LineChart';
+import { LineChart } from '@canvas-sdk/charts';
+import { categoricalScale, dateTimeScale, linearScale, logarithmicScale } from '@canvas-sdk/charts/scale';
 import { VerticalBarChart } from 'src/charts/VerticalBarChart';
-import { categoricalScale } from 'src/charts/scale/categorical';
-import { dateTimeScale } from 'src/charts/scale/datetime';
-import { linearScale } from 'src/charts/scale/linear';
-import { logarithmicScale } from 'src/charts/scale/logarithmic';
 import { parseDateTimeNtz } from 'src/util/DateUtil';
 import { DateTime } from 'luxon';
 import { ChartTheme } from './ChartTheme';
diff --git a/react/src/charts/HorizontalGrid.tsx b/react/src/charts/HorizontalGrid.tsx
index c1ec1d6..eb365be 100644
--- a/react/src/charts/HorizontalGrid.tsx
+++ b/react/src/charts/HorizontalGrid.tsx
@@ -23,7 +23,7 @@ export function HorizontalGrid({
                         x2={xEnd}
                         y1={y}
                         y2={y}
-                        className={point === 0 ? 'stroke-default' : 'stroke-divider'}
+                        className={point === 0 ? 'stroke-default' : 'stroke-[var(--chart-grid,#E3E3E5)]'}
                     />
                 );
             })}
diff --git a/react/src/charts/VerticalGrid.tsx b/react/src/charts/VerticalGrid.tsx
index 062e662..443c145 100644
--- a/react/src/charts/VerticalGrid.tsx
+++ b/react/src/charts/VerticalGrid.tsx
@@ -23,7 +23,7 @@ export function VerticalGrid({
                         y2={yEnd}
                         x1={x}
                         x2={x}
-                        className={point === 0 ? 'stroke-default' : 'stroke-divider'}
+                        className={point === 0 ? 'stroke-default' : 'stroke-[var(--chart-grid,#E3E3E5)]'}
                     />
                 );
             })}