From d00b4189779981c592ddbbebc1e8b5deb92a3d55 Mon Sep 17 00:00:00 2001
From: Andrew Gregory <andrew.gregory@gmail.com>
Date: Wed, 18 Mar 2026 21:42:52 +0800
Subject: [PATCH 1/8] Add "ct-chart" class

---
 src/charts/BarChart/BarChart.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/charts/BarChart/BarChart.ts b/src/charts/BarChart/BarChart.ts
index 7a22758e8..bbbdab6ed 100644
--- a/src/charts/BarChart/BarChart.ts
+++ b/src/charts/BarChart/BarChart.ts
@@ -130,7 +130,7 @@ const defaultOptions = {
   showGridBackground: false,
   // Override the class names that get used to generate the SVG structure of the chart
   classNames: {
-    chart: 'ct-chart-bar',
+    chart: 'ct-chart ct-chart-bar',
     horizontalBars: 'ct-horizontal-bars',
     label: 'ct-label',
     labelGroup: 'ct-labels',

From 30221db4e2e3169b9dbc75b75bf783538467a8e3 Mon Sep 17 00:00:00 2001
From: Andrew Gregory <andrew.gregory@gmail.com>
Date: Wed, 18 Mar 2026 21:43:21 +0800
Subject: [PATCH 2/8] Add "ct-chart" class

---
 src/charts/LineChart/LineChart.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/charts/LineChart/LineChart.ts b/src/charts/LineChart/LineChart.ts
index ce0bd80d0..6403033bf 100644
--- a/src/charts/LineChart/LineChart.ts
+++ b/src/charts/LineChart/LineChart.ts
@@ -132,7 +132,7 @@ const defaultOptions = {
   reverseData: false,
   // Override the class names that get used to generate the SVG structure of the chart
   classNames: {
-    chart: 'ct-chart-line',
+    chart: 'ct-chart ct-chart-line',
     label: 'ct-label',
     labelGroup: 'ct-labels',
     series: 'ct-series',

From c2e0771ff3b68ba1a033823b604cdd7c892e935d Mon Sep 17 00:00:00 2001
From: Andrew Gregory <andrew.gregory@gmail.com>
Date: Wed, 18 Mar 2026 21:44:18 +0800
Subject: [PATCH 3/8] Add "ct-chart" class

---
 src/charts/PieChart/PieChart.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/charts/PieChart/PieChart.ts b/src/charts/PieChart/PieChart.ts
index eb53c57ec..e94c53936 100644
--- a/src/charts/PieChart/PieChart.ts
+++ b/src/charts/PieChart/PieChart.ts
@@ -43,8 +43,8 @@ const defaultOptions = {
   chartPadding: 5,
   // Override the class names that are used to generate the SVG structure of the chart
   classNames: {
-    chartPie: 'ct-chart-pie',
-    chartDonut: 'ct-chart-donut',
+    chartPie: 'ct-chart ct-chart-pie',
+    chartDonut: 'ct-chart ct-chart-donut',
     series: 'ct-series',
     slicePie: 'ct-slice-pie',
     sliceDonut: 'ct-slice-donut',

From 7212e603d3f321378263ca96629362ade96b096d Mon Sep 17 00:00:00 2001
From: Andrew Gregory <andrew.gregory@gmail.com>
Date: Wed, 18 Mar 2026 21:45:09 +0800
Subject: [PATCH 4/8] Use Sass list module

---
 src/styles/_settings.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/_settings.scss b/src/styles/_settings.scss
index 8e456a2df..837912785 100644
--- a/src/styles/_settings.scss
+++ b/src/styles/_settings.scss
@@ -1,3 +1,4 @@
+@use "sass:list";
 @use "sass:math";
 
 // Scales for responsive SVG containers

From 96eb5a0b74c7fd5509945fa29c6cc3808d853072 Mon Sep 17 00:00:00 2001
From: Andrew Gregory <andrew.gregory@gmail.com>
Date: Wed, 18 Mar 2026 21:48:07 +0800
Subject: [PATCH 5/8] Use Sass list module

---
 src/styles/index.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 612533ecb..6503c32cc 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -181,9 +181,9 @@
   }
 
   @if $ct-include-colored-series {
-    @for $i from 0 to length($ct-series-names) {
-      .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} {
-        $color: nth($ct-series-colors, $i + 1);
+    @for $i from 0 to list.length($ct-series-names) {
+      .#{$ct-class-series}-#{list.nth($ct-series-names, $i + 1)} {
+        $color: list.nth($ct-series-colors, $i + 1);
 
         @include ct-chart-series-color($color);
       }
@@ -195,9 +195,9 @@
   @include ct-chart();
 
   @if $ct-include-alternative-responsive-containers {
-    @for $i from 0 to length($ct-scales-names) {
-      .#{nth($ct-scales-names, $i + 1)} {
-        @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));
+    @for $i from 0 to list.length($ct-scales-names) {
+      .#{list.nth($ct-scales-names, $i + 1)} {
+        @include ct-responsive-svg-container($ratio: list.nth($ct-scales, $i + 1));
       }
     }
   }

From 3bb398ff8a8e60a63895b9fa31e9e4c5719ebc5b Mon Sep 17 00:00:00 2001
From: Andrew Gregory <andrew.gregory@gmail.com>
Date: Wed, 18 Mar 2026 21:53:33 +0800
Subject: [PATCH 6/8] Group identical align-justify rules

---
 src/styles/index.scss | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 6503c32cc..2d0267629 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -112,11 +112,14 @@
     dominant-baseline: central;
   }
 
-  .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
+  .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start},
+  .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end},
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
     @include ct-align-justify(flex-end, flex-start);
   }
 
-  .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
+  .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end},
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
     @include ct-align-justify(flex-start, flex-start);
   }
 
@@ -124,10 +127,6 @@
     @include ct-align-justify(flex-end, flex-end);
   }
 
-  .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
-    @include ct-align-justify(flex-end, flex-start);
-  }
-
   .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
     @include ct-align-justify(flex-end, center);
   }
@@ -136,14 +135,6 @@
     @include ct-align-justify(flex-start, center);
   }
 
-  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
-    @include ct-align-justify(flex-end, flex-start);
-  }
-
-  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
-    @include ct-align-justify(flex-start, flex-start);
-  }
-
   .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
     @include ct-align-justify(center, flex-end);
   }

From 38502b7d03a8cc738d81193c3a097fbb2c363d67 Mon Sep 17 00:00:00 2001
From: Andrew Gregory <andrew.gregory@gmail.com>
Date: Wed, 18 Mar 2026 22:03:21 +0800
Subject: [PATCH 7/8] Resolve excessive CSS duplication

---
 src/styles/index.scss | 59 +++++++++++++++++++++++--------------------
 1 file changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 2d0267629..e04032f44 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,31 +1,11 @@
 @import "settings";
 
-@mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) {
-  display: block;
-  position: relative;
-  width: $width;
-
-  &:before {
-    display: block;
-    float: left;
-    content: "";
-    width: 0;
-    height: 0;
-    padding-bottom: $ratio * 100%;
-  }
-
-  &:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
-  > svg {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
+@function list-to-classes($list) {
+  $new-list: ();
+  @each $item in $list {
+    $new-list: list.append($new-list, #{"."}#{$item}, comma);
   }
+  @return $new-list;
 }
 
 @mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) {
@@ -186,9 +166,32 @@
   @include ct-chart();
 
   @if $ct-include-alternative-responsive-containers {
-    @for $i from 0 to list.length($ct-scales-names) {
-      .#{list.nth($ct-scales-names, $i + 1)} {
-        @include ct-responsive-svg-container($ratio: list.nth($ct-scales, $i + 1));
+    #{list-to-classes($ct-scales-names)} {
+      display: block;
+      position: relative;
+      width: 100%;
+      &:before {
+        display: block;
+        float: left;
+        content: "";
+        width: 0;
+        height: 0;
+      }
+      &:after {
+        content: "";
+        display: table;
+        clear: both;
+      }
+      > svg{
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    }
+    @each $name in $ct-scales-names {
+      .#{$name}:before {
+        padding-bottom: list.nth($ct-scales, list.index($ct-scales-names, $name)) * 100%;
       }
     }
   }

From 134d9a27eeb0367da3c15bfcc862f7d6318f024f Mon Sep 17 00:00:00 2001
From: Andrew Gregory <andrew.gregory@gmail.com>
Date: Wed, 18 Mar 2026 22:25:53 +0800
Subject: [PATCH 8/8] Use CSS variables for series colors

To customize chart colors required complicated CSS changes to do the necessary overrides. This changes makes it much easier to override colors.
---
 src/styles/index.scss | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index e04032f44..8f7a8ab4d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -66,13 +66,13 @@
   stroke-width: $ct-donut-width;
 }
 
-@mixin ct-chart-series-color($color) {
+@mixin ct-chart-series-color($series) {
   .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} {
-    stroke: $color;
+    stroke: var(--#{$ct-class-series}-#{$series}-color);
   }
 
   .#{$ct-class-slice-pie}, .#{$ct-class-area} {
-    fill: $color;
+    fill: var(--#{$ct-class-series}-#{$series}-color);
   }
 }
 
@@ -152,11 +152,17 @@
   }
 
   @if $ct-include-colored-series {
-    @for $i from 0 to list.length($ct-series-names) {
-      .#{$ct-class-series}-#{list.nth($ct-series-names, $i + 1)} {
+    .#{$ct-class-series} {
+      @for $i from 0 to list.length($ct-series-names) {
+        $series: list.nth($ct-series-names, $i + 1);
         $color: list.nth($ct-series-colors, $i + 1);
-
-        @include ct-chart-series-color($color);
+        
+        --#{$ct-class-series}-#{$series}-color: #{$color};
+      }
+    }
+    @each $series in $ct-series-names {
+      .#{$ct-class-series}-#{$series} {
+        @include ct-chart-series-color($series);
       }
     }
   }