@carbon/charts 0.41.100 → 0.42.1

package/styles-g90.css

@@ -3,12 +3,14 @@
 }
 .bx--cc--chart-wrapper .fill-1-1-1.hovered {
   fill: #bd97ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-1-1-1 {
   background-color: #d4bbff;
 }
 .bx--cc--chart-wrapper .background-1-1-1.hovered {
   background-color: #bd97ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-1-1-1 {
   stroke: #d4bbff;
@@ -18,12 +20,14 @@
 }
 .bx--cc--chart-wrapper .fill-1-2-1.hovered {
   fill: #2172ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-1-2-1 {
   background-color: #4589ff;
 }
 .bx--cc--chart-wrapper .background-1-2-1.hovered {
   background-color: #2172ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-1-2-1 {
   stroke: #4589ff;
@@ -33,12 +37,14 @@
 }
 .bx--cc--chart-wrapper .fill-1-3-1.hovered {
   fill: #0fa3ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-1-3-1 {
   background-color: #33b1ff;
 }
 .bx--cc--chart-wrapper .background-1-3-1.hovered {
   background-color: #0fa3ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-1-3-1 {
   stroke: #33b1ff;
@@ -48,12 +54,14 @@
 }
 .bx--cc--chart-wrapper .fill-1-4-1.hovered {
   fill: #079b98;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-1-4-1 {
   background-color: #08bdba;
 }
 .bx--cc--chart-wrapper .background-1-4-1.hovered {
   background-color: #079b98;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-1-4-1 {
   stroke: #08bdba;
@@ -63,12 +71,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-1-1.hovered {
   fill: #751cfb;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-1-1 {
   background-color: #8a3ffc;
 }
 .bx--cc--chart-wrapper .background-2-1-1.hovered {
   background-color: #751cfb;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-1-1 {
   stroke: #8a3ffc;
@@ -78,12 +88,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-1-2.hovered {
   fill: #079b98;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-1-2 {
   background-color: #08bdba;
 }
 .bx--cc--chart-wrapper .background-2-1-2.hovered {
   background-color: #079b98;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-1-2 {
   stroke: #08bdba;
@@ -93,12 +105,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-2-1.hovered {
   fill: #751cfb;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-2-1 {
   background-color: #8a3ffc;
 }
 .bx--cc--chart-wrapper .background-2-2-1.hovered {
   background-color: #751cfb;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-2-1 {
   stroke: #8a3ffc;
@@ -108,12 +122,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-2-2.hovered {
   fill: #ff5aa2;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-2-2 {
   background-color: #ff7eb6;
 }
 .bx--cc--chart-wrapper .background-2-2-2.hovered {
   background-color: #ff5aa2;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-2-2 {
   stroke: #ff7eb6;
@@ -123,12 +139,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-3-1.hovered {
   fill: #ff5aa2;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-3-1 {
   background-color: #ff7eb6;
 }
 .bx--cc--chart-wrapper .background-2-3-1.hovered {
   background-color: #ff5aa2;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-3-1 {
   stroke: #ff7eb6;
@@ -138,12 +156,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-3-2.hovered {
   fill: #ffcdcd;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-3-2 {
   background-color: #fff1f1;
 }
 .bx--cc--chart-wrapper .background-2-3-2.hovered {
   background-color: #ffcdcd;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-3-2 {
   stroke: #fff1f1;
@@ -153,12 +173,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-4-1.hovered {
   fill: #2172ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-4-1 {
   background-color: #4589ff;
 }
 .bx--cc--chart-wrapper .background-2-4-1.hovered {
   background-color: #2172ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-4-1 {
   stroke: #4589ff;
@@ -168,12 +190,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-4-2.hovered {
   fill: #96d9ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-4-2 {
   background-color: #bae6ff;
 }
 .bx--cc--chart-wrapper .background-2-4-2.hovered {
   background-color: #96d9ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-4-2 {
   stroke: #bae6ff;
@@ -183,12 +207,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-5-1.hovered {
   fill: #005956;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-5-1 {
   background-color: #007d79;
 }
 .bx--cc--chart-wrapper .background-2-5-1.hovered {
   background-color: #005956;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-5-1 {
   stroke: #007d79;
@@ -198,12 +224,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-5-2.hovered {
   fill: #52d575;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-5-2 {
   background-color: #6fdc8c;
 }
 .bx--cc--chart-wrapper .background-2-5-2.hovered {
   background-color: #52d575;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-5-2 {
   stroke: #6fdc8c;
@@ -213,12 +241,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-1-1.hovered {
   fill: #751cfb;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-1-1 {
   background-color: #8a3ffc;
 }
 .bx--cc--chart-wrapper .background-3-1-1.hovered {
   background-color: #751cfb;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-1-1 {
   stroke: #8a3ffc;
@@ -228,12 +258,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-1-2.hovered {
   fill: #079b98;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-1-2 {
   background-color: #08bdba;
 }
 .bx--cc--chart-wrapper .background-3-1-2.hovered {
   background-color: #079b98;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-1-2 {
   stroke: #08bdba;
@@ -243,12 +275,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-1-3.hovered {
   fill: #96d9ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-1-3 {
   background-color: #bae6ff;
 }
 .bx--cc--chart-wrapper .background-3-1-3.hovered {
   background-color: #96d9ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-1-3 {
   stroke: #bae6ff;
@@ -258,12 +292,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-2-1.hovered {
   fill: #751cfb;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-2-1 {
   background-color: #8a3ffc;
 }
 .bx--cc--chart-wrapper .background-3-2-1.hovered {
   background-color: #751cfb;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-2-1 {
   stroke: #8a3ffc;
@@ -273,12 +309,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-2-2.hovered {
   fill: #ff5aa2;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-2-2 {
   background-color: #ff7eb6;
 }
 .bx--cc--chart-wrapper .background-3-2-2.hovered {
   background-color: #ff5aa2;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-2-2 {
   stroke: #ff7eb6;
@@ -288,12 +326,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-2-3.hovered {
   fill: #ffcdcd;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-2-3 {
   background-color: #fff1f1;
 }
 .bx--cc--chart-wrapper .background-3-2-3.hovered {
   background-color: #ffcdcd;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-2-3 {
   stroke: #fff1f1;
@@ -303,12 +343,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-3-1.hovered {
   fill: #2172ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-3-1 {
   background-color: #4589ff;
 }
 .bx--cc--chart-wrapper .background-3-3-1.hovered {
   background-color: #2172ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-3-1 {
   stroke: #4589ff;
@@ -318,12 +360,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-3-2.hovered {
   fill: #079b98;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-3-2 {
   background-color: #08bdba;
 }
 .bx--cc--chart-wrapper .background-3-3-2.hovered {
   background-color: #079b98;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-3-2 {
   stroke: #08bdba;
@@ -333,12 +377,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-3-3.hovered {
   fill: #bd97ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-3-3 {
   background-color: #d4bbff;
 }
 .bx--cc--chart-wrapper .background-3-3-3.hovered {
   background-color: #bd97ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-3-3 {
   stroke: #d4bbff;
@@ -348,12 +394,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-4-1.hovered {
   fill: #2172ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-4-1 {
   background-color: #4589ff;
 }
 .bx--cc--chart-wrapper .background-3-4-1.hovered {
   background-color: #2172ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-4-1 {
   stroke: #4589ff;
@@ -363,12 +411,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-4-2.hovered {
   fill: #52d575;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-4-2 {
   background-color: #6fdc8c;
 }
 .bx--cc--chart-wrapper .background-3-4-2.hovered {
   background-color: #52d575;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-4-2 {
   stroke: #6fdc8c;
@@ -378,12 +428,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-4-3.hovered {
   fill: #ffcdcd;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-4-3 {
   background-color: #fff1f1;
 }
 .bx--cc--chart-wrapper .background-3-4-3.hovered {
   background-color: #ffcdcd;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-4-3 {
   stroke: #fff1f1;
@@ -393,12 +445,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-5-1.hovered {
   fill: #005956;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-5-1 {
   background-color: #007d79;
 }
 .bx--cc--chart-wrapper .background-3-5-1.hovered {
   background-color: #005956;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-5-1 {
   stroke: #007d79;
@@ -408,12 +462,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-5-2.hovered {
   fill: #52d575;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-5-2 {
   background-color: #6fdc8c;
 }
 .bx--cc--chart-wrapper .background-3-5-2.hovered {
   background-color: #52d575;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-5-2 {
   stroke: #6fdc8c;
@@ -423,12 +479,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-5-3.hovered {
   fill: #96d9ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-5-3 {
   background-color: #bae6ff;
 }
 .bx--cc--chart-wrapper .background-3-5-3.hovered {
   background-color: #96d9ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-5-3 {
   stroke: #bae6ff;
@@ -438,12 +496,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-1-1.hovered {
   fill: #751cfb;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-1-1 {
   background-color: #8a3ffc;
 }
 .bx--cc--chart-wrapper .background-4-1-1.hovered {
   background-color: #751cfb;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-1-1 {
   stroke: #8a3ffc;
@@ -453,12 +513,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-1-2.hovered {
   fill: #079b98;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-1-2 {
   background-color: #08bdba;
 }
 .bx--cc--chart-wrapper .background-4-1-2.hovered {
   background-color: #079b98;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-1-2 {
   stroke: #08bdba;
@@ -468,12 +530,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-1-3.hovered {
   fill: #96d9ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-1-3 {
   background-color: #bae6ff;
 }
 .bx--cc--chart-wrapper .background-4-1-3.hovered {
   background-color: #96d9ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-1-3 {
   stroke: #bae6ff;
@@ -483,12 +547,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-1-4.hovered {
   fill: #2172ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-1-4 {
   background-color: #4589ff;
 }
 .bx--cc--chart-wrapper .background-4-1-4.hovered {
   background-color: #2172ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-1-4 {
   stroke: #4589ff;
@@ -498,12 +564,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-2-1.hovered {
   fill: #2172ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-2-1 {
   background-color: #4589ff;
 }
 .bx--cc--chart-wrapper .background-4-2-1.hovered {
   background-color: #2172ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-2-1 {
   stroke: #4589ff;
@@ -513,12 +581,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-2-2.hovered {
   fill: #079b98;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-2-2 {
   background-color: #08bdba;
 }
 .bx--cc--chart-wrapper .background-4-2-2.hovered {
   background-color: #079b98;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-2-2 {
   stroke: #08bdba;
@@ -528,12 +598,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-2-3.hovered {
   fill: #bd97ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-2-3 {
   background-color: #d4bbff;
 }
 .bx--cc--chart-wrapper .background-4-2-3.hovered {
   background-color: #bd97ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-2-3 {
   stroke: #d4bbff;
@@ -543,12 +615,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-2-4.hovered {
   fill: #ffcdcd;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-2-4 {
   background-color: #fff1f1;
 }
 .bx--cc--chart-wrapper .background-4-2-4.hovered {
   background-color: #ffcdcd;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-2-4 {
   stroke: #fff1f1;
@@ -558,12 +632,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-3-1.hovered {
   fill: #005956;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-3-1 {
   background-color: #007d79;
 }
 .bx--cc--chart-wrapper .background-4-3-1.hovered {
   background-color: #005956;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-3-1 {
   stroke: #007d79;
@@ -573,12 +649,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-3-2.hovered {
   fill: #ffcdcd;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-3-2 {
   background-color: #fff1f1;
 }
 .bx--cc--chart-wrapper .background-4-3-2.hovered {
   background-color: #ffcdcd;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-3-2 {
   stroke: #fff1f1;
@@ -588,12 +666,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-3-3.hovered {
   fill: #0fa3ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-3-3 {
   background-color: #33b1ff;
 }
 .bx--cc--chart-wrapper .background-4-3-3.hovered {
   background-color: #0fa3ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-3-3 {
   stroke: #33b1ff;
@@ -603,12 +683,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-3-4.hovered {
   fill: #52d575;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-3-4 {
   background-color: #6fdc8c;
 }
 .bx--cc--chart-wrapper .background-4-3-4.hovered {
   background-color: #52d575;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-3-4 {
   stroke: #6fdc8c;
@@ -618,12 +700,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-1-1.hovered {
   fill: #751cfb;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-1-1 {
   background-color: #8a3ffc;
 }
 .bx--cc--chart-wrapper .background-5-1-1.hovered {
   background-color: #751cfb;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-1-1 {
   stroke: #8a3ffc;
@@ -633,12 +717,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-1-2.hovered {
   fill: #079b98;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-1-2 {
   background-color: #08bdba;
 }
 .bx--cc--chart-wrapper .background-5-1-2.hovered {
   background-color: #079b98;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-1-2 {
   stroke: #08bdba;
@@ -648,12 +734,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-1-3.hovered {
   fill: #96d9ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-1-3 {
   background-color: #bae6ff;
 }
 .bx--cc--chart-wrapper .background-5-1-3.hovered {
   background-color: #96d9ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-1-3 {
   stroke: #bae6ff;
@@ -663,12 +751,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-1-4.hovered {
   fill: #2172ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-1-4 {
   background-color: #4589ff;
 }
 .bx--cc--chart-wrapper .background-5-1-4.hovered {
   background-color: #2172ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-1-4 {
   stroke: #4589ff;
@@ -678,12 +768,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-1-5.hovered {
   fill: #ff5aa2;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-1-5 {
   background-color: #ff7eb6;
 }
 .bx--cc--chart-wrapper .background-5-1-5.hovered {
   background-color: #ff5aa2;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-1-5 {
   stroke: #ff7eb6;
@@ -693,12 +785,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-2-1.hovered {
   fill: #2172ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-2-1 {
   background-color: #4589ff;
 }
 .bx--cc--chart-wrapper .background-5-2-1.hovered {
   background-color: #2172ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-2-1 {
   stroke: #4589ff;
@@ -708,12 +802,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-2-2.hovered {
   fill: #079b98;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-2-2 {
   background-color: #08bdba;
 }
 .bx--cc--chart-wrapper .background-5-2-2.hovered {
   background-color: #079b98;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-2-2 {
   stroke: #08bdba;
@@ -723,12 +819,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-2-3.hovered {
   fill: #bd97ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-2-3 {
   background-color: #d4bbff;
 }
 .bx--cc--chart-wrapper .background-5-2-3.hovered {
   background-color: #bd97ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-2-3 {
   stroke: #d4bbff;
@@ -738,12 +836,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-2-4.hovered {
   fill: #ffcdcd;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-2-4 {
   background-color: #fff1f1;
 }
 .bx--cc--chart-wrapper .background-5-2-4.hovered {
   background-color: #ffcdcd;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-2-4 {
   stroke: #fff1f1;
@@ -753,12 +853,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-2-5.hovered {
   fill: #52d575;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-2-5 {
   background-color: #6fdc8c;
 }
 .bx--cc--chart-wrapper .background-5-2-5.hovered {
   background-color: #52d575;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-2-5 {
   stroke: #6fdc8c;
@@ -768,12 +870,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-1.hovered {
   fill: #751cfb;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-1 {
   background-color: #8a3ffc;
 }
 .bx--cc--chart-wrapper .background-14-1-1.hovered {
   background-color: #751cfb;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-1 {
   stroke: #8a3ffc;
@@ -783,12 +887,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-2.hovered {
   fill: #0fa3ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-2 {
   background-color: #33b1ff;
 }
 .bx--cc--chart-wrapper .background-14-1-2.hovered {
   background-color: #0fa3ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-2 {
   stroke: #33b1ff;
@@ -798,12 +904,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-3.hovered {
   fill: #005956;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-3 {
   background-color: #007d79;
 }
 .bx--cc--chart-wrapper .background-14-1-3.hovered {
   background-color: #005956;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-3 {
   stroke: #007d79;
@@ -813,12 +921,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-4.hovered {
   fill: #ff5aa2;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-4 {
   background-color: #ff7eb6;
 }
 .bx--cc--chart-wrapper .background-14-1-4.hovered {
   background-color: #ff5aa2;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-4 {
   stroke: #ff7eb6;
@@ -828,12 +938,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-5.hovered {
   fill: #f92a35;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-5 {
   background-color: #fa4d56;
 }
 .bx--cc--chart-wrapper .background-14-1-5.hovered {
   background-color: #f92a35;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-5 {
   stroke: #fa4d56;
@@ -843,12 +955,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-6.hovered {
   fill: #ffcdcd;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-6 {
   background-color: #fff1f1;
 }
 .bx--cc--chart-wrapper .background-14-1-6.hovered {
   background-color: #ffcdcd;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-6 {
   stroke: #fff1f1;
@@ -858,12 +972,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-7.hovered {
   fill: #52d575;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-7 {
   background-color: #6fdc8c;
 }
 .bx--cc--chart-wrapper .background-14-1-7.hovered {
   background-color: #52d575;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-7 {
   stroke: #6fdc8c;
@@ -873,12 +989,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-8.hovered {
   fill: #2172ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-8 {
   background-color: #4589ff;
 }
 .bx--cc--chart-wrapper .background-14-1-8.hovered {
   background-color: #2172ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-8 {
   stroke: #4589ff;
@@ -888,12 +1006,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-9.hovered {
   fill: #b22060;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-9 {
   background-color: #d02670;
 }
 .bx--cc--chart-wrapper .background-14-1-9.hovered {
   background-color: #b22060;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-9 {
   stroke: #d02670;
@@ -903,12 +1023,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-10.hovered {
   fill: #af8605;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-10 {
   background-color: #d2a106;
 }
 .bx--cc--chart-wrapper .background-14-1-10.hovered {
   background-color: #af8605;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-10 {
   stroke: #d2a106;
@@ -918,12 +1040,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-11.hovered {
   fill: #079b98;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-11 {
   background-color: #08bdba;
 }
 .bx--cc--chart-wrapper .background-14-1-11.hovered {
   background-color: #079b98;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-11 {
   stroke: #08bdba;
@@ -933,12 +1057,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-12.hovered {
   fill: #96d9ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-12 {
   background-color: #bae6ff;
 }
 .bx--cc--chart-wrapper .background-14-1-12.hovered {
   background-color: #96d9ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-12 {
   stroke: #bae6ff;
@@ -948,12 +1074,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-13.hovered {
   fill: #963f00;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-13 {
   background-color: #ba4e00;
 }
 .bx--cc--chart-wrapper .background-14-1-13.hovered {
   background-color: #963f00;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-13 {
   stroke: #ba4e00;
@@ -963,12 +1091,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-14.hovered {
   fill: #bd97ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-14 {
   background-color: #d4bbff;
 }
 .bx--cc--chart-wrapper .background-14-1-14.hovered {
   background-color: #bd97ff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-14 {
   stroke: #d4bbff;
@@ -1249,7 +1379,8 @@
   stroke: #ffffff;
 }
 
-.bx--cc--ruler line.ruler-line {
+.bx--cc--ruler line.ruler-line,
+.bx--cc--ruler-binned line.ruler-line {
   stroke: #ffffff;
   stroke-width: 1px;
   stroke-dasharray: 2;