Css enhancements

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',

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',

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',

src/styles/_settings.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 @use "sass:math";
 
 // Scales for responsive SVG containers

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) {
@@ -86,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);
   }
 }
 
@@ -112,22 +92,21 @@
     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);
   }
 
   .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
     @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 +115,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);
   }
@@ -181,11 +152,17 @@
   }
 
   @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);
-
-        @include ct-chart-series-color($color);
+    .#{$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);
+
+        --#{$ct-class-series}-#{$series}-color: #{$color};
+      }
+    }
+    @each $series in $ct-series-names {
+      .#{$ct-class-series}-#{$series} {
+        @include ct-chart-series-color($series);
       }
     }
   }
@@ -195,9 +172,32 @@
   @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));
+    #{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%;
       }
     }
   }