chartist 2.0.0-rc.2 → 2.0.0

package/dist/index.css

@@ -4,6 +4,12 @@
   font-size: var(--ct-label-size, 0.75rem);
   line-height: 1;
 }
+@supports (color: light-dark(#000, #fff)) {
+  .ct-label {
+    fill: var(--ct-label-color, light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.6)));
+    color: var(--ct-label-color, light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.6)));
+  }
+}
 
 .ct-chart-line .ct-label,
 .ct-chart-bar .ct-label,
@@ -81,6 +87,11 @@ foreignObject > .ct-label {
   stroke-width: var(--ct-grid-width, 1px);
   stroke-dasharray: var(--ct-grid-dasharray, 2px);
 }
+@supports (color: light-dark(#000, #fff)) {
+  .ct-grid {
+    stroke: var(--ct-grid-color, light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2)));
+  }
+}
 
 .ct-grid-background {
   fill: var(--ct-grid-background-fill, none);
@@ -112,17 +123,46 @@ foreignObject > .ct-label {
   stroke-width: var(--ct-donut-width, 60px);
 }
 
+.ct-target-line {
+  fill: none;
+  stroke: var(--ct-color, var(--ct-target-line-color, currentColor));
+  stroke-width: var(--ct-target-line-width, 1px);
+  stroke-dasharray: var(--ct-target-line-dasharray, 4px 4px);
+}
+
+.ct-target-label {
+  fill: var(--ct-color, var(--ct-target-line-color, currentColor));
+  font-size: var(--ct-label-size, 0.75rem);
+}
+
+.ct-band-area {
+  stroke: none;
+  fill: var(--ct-color, var(--ct-band-color, currentColor));
+  fill-opacity: var(--ct-band-opacity, 0.12);
+}
+
+.ct-trend-line {
+  fill: none;
+  stroke: var(--ct-color);
+  stroke-width: var(--ct-trend-line-width, 2px);
+  stroke-dasharray: var(--ct-trend-line-dasharray, 6px 4px);
+}
+
 .ct-series-a {
   --ct-color: var(--ct-series-a, #d70206);
 }
 .ct-series-a .ct-point,
 .ct-series-a .ct-line,
 .ct-series-a .ct-bar,
-.ct-series-a .ct-slice-donut {
+.ct-series-a .ct-slice-donut,
+.ct-series-a .ct-trend-line,
+.ct-series-a .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-a .ct-slice-pie,
-.ct-series-a .ct-area {
+.ct-series-a .ct-area,
+.ct-series-a .ct-target-label,
+.ct-series-a .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -132,11 +172,15 @@ foreignObject > .ct-label {
 .ct-series-b .ct-point,
 .ct-series-b .ct-line,
 .ct-series-b .ct-bar,
-.ct-series-b .ct-slice-donut {
+.ct-series-b .ct-slice-donut,
+.ct-series-b .ct-trend-line,
+.ct-series-b .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-b .ct-slice-pie,
-.ct-series-b .ct-area {
+.ct-series-b .ct-area,
+.ct-series-b .ct-target-label,
+.ct-series-b .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -146,11 +190,15 @@ foreignObject > .ct-label {
 .ct-series-c .ct-point,
 .ct-series-c .ct-line,
 .ct-series-c .ct-bar,
-.ct-series-c .ct-slice-donut {
+.ct-series-c .ct-slice-donut,
+.ct-series-c .ct-trend-line,
+.ct-series-c .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-c .ct-slice-pie,
-.ct-series-c .ct-area {
+.ct-series-c .ct-area,
+.ct-series-c .ct-target-label,
+.ct-series-c .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -160,11 +208,15 @@ foreignObject > .ct-label {
 .ct-series-d .ct-point,
 .ct-series-d .ct-line,
 .ct-series-d .ct-bar,
-.ct-series-d .ct-slice-donut {
+.ct-series-d .ct-slice-donut,
+.ct-series-d .ct-trend-line,
+.ct-series-d .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-d .ct-slice-pie,
-.ct-series-d .ct-area {
+.ct-series-d .ct-area,
+.ct-series-d .ct-target-label,
+.ct-series-d .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -174,11 +226,15 @@ foreignObject > .ct-label {
 .ct-series-e .ct-point,
 .ct-series-e .ct-line,
 .ct-series-e .ct-bar,
-.ct-series-e .ct-slice-donut {
+.ct-series-e .ct-slice-donut,
+.ct-series-e .ct-trend-line,
+.ct-series-e .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-e .ct-slice-pie,
-.ct-series-e .ct-area {
+.ct-series-e .ct-area,
+.ct-series-e .ct-target-label,
+.ct-series-e .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -188,11 +244,15 @@ foreignObject > .ct-label {
 .ct-series-f .ct-point,
 .ct-series-f .ct-line,
 .ct-series-f .ct-bar,
-.ct-series-f .ct-slice-donut {
+.ct-series-f .ct-slice-donut,
+.ct-series-f .ct-trend-line,
+.ct-series-f .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-f .ct-slice-pie,
-.ct-series-f .ct-area {
+.ct-series-f .ct-area,
+.ct-series-f .ct-target-label,
+.ct-series-f .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -202,11 +262,15 @@ foreignObject > .ct-label {
 .ct-series-g .ct-point,
 .ct-series-g .ct-line,
 .ct-series-g .ct-bar,
-.ct-series-g .ct-slice-donut {
+.ct-series-g .ct-slice-donut,
+.ct-series-g .ct-trend-line,
+.ct-series-g .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-g .ct-slice-pie,
-.ct-series-g .ct-area {
+.ct-series-g .ct-area,
+.ct-series-g .ct-target-label,
+.ct-series-g .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -216,11 +280,15 @@ foreignObject > .ct-label {
 .ct-series-h .ct-point,
 .ct-series-h .ct-line,
 .ct-series-h .ct-bar,
-.ct-series-h .ct-slice-donut {
+.ct-series-h .ct-slice-donut,
+.ct-series-h .ct-trend-line,
+.ct-series-h .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-h .ct-slice-pie,
-.ct-series-h .ct-area {
+.ct-series-h .ct-area,
+.ct-series-h .ct-target-label,
+.ct-series-h .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -230,11 +298,15 @@ foreignObject > .ct-label {
 .ct-series-i .ct-point,
 .ct-series-i .ct-line,
 .ct-series-i .ct-bar,
-.ct-series-i .ct-slice-donut {
+.ct-series-i .ct-slice-donut,
+.ct-series-i .ct-trend-line,
+.ct-series-i .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-i .ct-slice-pie,
-.ct-series-i .ct-area {
+.ct-series-i .ct-area,
+.ct-series-i .ct-target-label,
+.ct-series-i .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -244,11 +316,15 @@ foreignObject > .ct-label {
 .ct-series-j .ct-point,
 .ct-series-j .ct-line,
 .ct-series-j .ct-bar,
-.ct-series-j .ct-slice-donut {
+.ct-series-j .ct-slice-donut,
+.ct-series-j .ct-trend-line,
+.ct-series-j .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-j .ct-slice-pie,
-.ct-series-j .ct-area {
+.ct-series-j .ct-area,
+.ct-series-j .ct-target-label,
+.ct-series-j .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -258,11 +334,15 @@ foreignObject > .ct-label {
 .ct-series-k .ct-point,
 .ct-series-k .ct-line,
 .ct-series-k .ct-bar,
-.ct-series-k .ct-slice-donut {
+.ct-series-k .ct-slice-donut,
+.ct-series-k .ct-trend-line,
+.ct-series-k .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-k .ct-slice-pie,
-.ct-series-k .ct-area {
+.ct-series-k .ct-area,
+.ct-series-k .ct-target-label,
+.ct-series-k .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -272,11 +352,15 @@ foreignObject > .ct-label {
 .ct-series-l .ct-point,
 .ct-series-l .ct-line,
 .ct-series-l .ct-bar,
-.ct-series-l .ct-slice-donut {
+.ct-series-l .ct-slice-donut,
+.ct-series-l .ct-trend-line,
+.ct-series-l .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-l .ct-slice-pie,
-.ct-series-l .ct-area {
+.ct-series-l .ct-area,
+.ct-series-l .ct-target-label,
+.ct-series-l .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -286,11 +370,15 @@ foreignObject > .ct-label {
 .ct-series-m .ct-point,
 .ct-series-m .ct-line,
 .ct-series-m .ct-bar,
-.ct-series-m .ct-slice-donut {
+.ct-series-m .ct-slice-donut,
+.ct-series-m .ct-trend-line,
+.ct-series-m .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-m .ct-slice-pie,
-.ct-series-m .ct-area {
+.ct-series-m .ct-area,
+.ct-series-m .ct-target-label,
+.ct-series-m .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -300,11 +388,15 @@ foreignObject > .ct-label {
 .ct-series-n .ct-point,
 .ct-series-n .ct-line,
 .ct-series-n .ct-bar,
-.ct-series-n .ct-slice-donut {
+.ct-series-n .ct-slice-donut,
+.ct-series-n .ct-trend-line,
+.ct-series-n .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-n .ct-slice-pie,
-.ct-series-n .ct-area {
+.ct-series-n .ct-area,
+.ct-series-n .ct-target-label,
+.ct-series-n .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -314,11 +406,15 @@ foreignObject > .ct-label {
 .ct-series-o .ct-point,
 .ct-series-o .ct-line,
 .ct-series-o .ct-bar,
-.ct-series-o .ct-slice-donut {
+.ct-series-o .ct-slice-donut,
+.ct-series-o .ct-trend-line,
+.ct-series-o .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-o .ct-slice-pie,
-.ct-series-o .ct-area {
+.ct-series-o .ct-area,
+.ct-series-o .ct-target-label,
+.ct-series-o .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -328,11 +424,15 @@ foreignObject > .ct-label {
 .ct-series-p .ct-point,
 .ct-series-p .ct-line,
 .ct-series-p .ct-bar,
-.ct-series-p .ct-slice-donut {
+.ct-series-p .ct-slice-donut,
+.ct-series-p .ct-trend-line,
+.ct-series-p .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-p .ct-slice-pie,
-.ct-series-p .ct-area {
+.ct-series-p .ct-area,
+.ct-series-p .ct-target-label,
+.ct-series-p .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -342,11 +442,15 @@ foreignObject > .ct-label {
 .ct-series-q .ct-point,
 .ct-series-q .ct-line,
 .ct-series-q .ct-bar,
-.ct-series-q .ct-slice-donut {
+.ct-series-q .ct-slice-donut,
+.ct-series-q .ct-trend-line,
+.ct-series-q .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-q .ct-slice-pie,
-.ct-series-q .ct-area {
+.ct-series-q .ct-area,
+.ct-series-q .ct-target-label,
+.ct-series-q .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -356,11 +460,15 @@ foreignObject > .ct-label {
 .ct-series-r .ct-point,
 .ct-series-r .ct-line,
 .ct-series-r .ct-bar,
-.ct-series-r .ct-slice-donut {
+.ct-series-r .ct-slice-donut,
+.ct-series-r .ct-trend-line,
+.ct-series-r .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-r .ct-slice-pie,
-.ct-series-r .ct-area {
+.ct-series-r .ct-area,
+.ct-series-r .ct-target-label,
+.ct-series-r .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -370,11 +478,15 @@ foreignObject > .ct-label {
 .ct-series-s .ct-point,
 .ct-series-s .ct-line,
 .ct-series-s .ct-bar,
-.ct-series-s .ct-slice-donut {
+.ct-series-s .ct-slice-donut,
+.ct-series-s .ct-trend-line,
+.ct-series-s .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-s .ct-slice-pie,
-.ct-series-s .ct-area {
+.ct-series-s .ct-area,
+.ct-series-s .ct-target-label,
+.ct-series-s .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -384,11 +496,15 @@ foreignObject > .ct-label {
 .ct-series-t .ct-point,
 .ct-series-t .ct-line,
 .ct-series-t .ct-bar,
-.ct-series-t .ct-slice-donut {
+.ct-series-t .ct-slice-donut,
+.ct-series-t .ct-trend-line,
+.ct-series-t .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-t .ct-slice-pie,
-.ct-series-t .ct-area {
+.ct-series-t .ct-area,
+.ct-series-t .ct-target-label,
+.ct-series-t .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -398,11 +514,15 @@ foreignObject > .ct-label {
 .ct-series-u .ct-point,
 .ct-series-u .ct-line,
 .ct-series-u .ct-bar,
-.ct-series-u .ct-slice-donut {
+.ct-series-u .ct-slice-donut,
+.ct-series-u .ct-trend-line,
+.ct-series-u .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-u .ct-slice-pie,
-.ct-series-u .ct-area {
+.ct-series-u .ct-area,
+.ct-series-u .ct-target-label,
+.ct-series-u .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -412,11 +532,15 @@ foreignObject > .ct-label {
 .ct-series-v .ct-point,
 .ct-series-v .ct-line,
 .ct-series-v .ct-bar,
-.ct-series-v .ct-slice-donut {
+.ct-series-v .ct-slice-donut,
+.ct-series-v .ct-trend-line,
+.ct-series-v .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-v .ct-slice-pie,
-.ct-series-v .ct-area {
+.ct-series-v .ct-area,
+.ct-series-v .ct-target-label,
+.ct-series-v .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -426,11 +550,15 @@ foreignObject > .ct-label {
 .ct-series-w .ct-point,
 .ct-series-w .ct-line,
 .ct-series-w .ct-bar,
-.ct-series-w .ct-slice-donut {
+.ct-series-w .ct-slice-donut,
+.ct-series-w .ct-trend-line,
+.ct-series-w .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-w .ct-slice-pie,
-.ct-series-w .ct-area {
+.ct-series-w .ct-area,
+.ct-series-w .ct-target-label,
+.ct-series-w .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -440,11 +568,15 @@ foreignObject > .ct-label {
 .ct-series-x .ct-point,
 .ct-series-x .ct-line,
 .ct-series-x .ct-bar,
-.ct-series-x .ct-slice-donut {
+.ct-series-x .ct-slice-donut,
+.ct-series-x .ct-trend-line,
+.ct-series-x .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-x .ct-slice-pie,
-.ct-series-x .ct-area {
+.ct-series-x .ct-area,
+.ct-series-x .ct-target-label,
+.ct-series-x .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -454,11 +586,15 @@ foreignObject > .ct-label {
 .ct-series-y .ct-point,
 .ct-series-y .ct-line,
 .ct-series-y .ct-bar,
-.ct-series-y .ct-slice-donut {
+.ct-series-y .ct-slice-donut,
+.ct-series-y .ct-trend-line,
+.ct-series-y .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-y .ct-slice-pie,
-.ct-series-y .ct-area {
+.ct-series-y .ct-area,
+.ct-series-y .ct-target-label,
+.ct-series-y .ct-band-area {
   fill: var(--ct-color);
 }
 
@@ -468,11 +604,15 @@ foreignObject > .ct-label {
 .ct-series-z .ct-point,
 .ct-series-z .ct-line,
 .ct-series-z .ct-bar,
-.ct-series-z .ct-slice-donut {
+.ct-series-z .ct-slice-donut,
+.ct-series-z .ct-trend-line,
+.ct-series-z .ct-target-line {
   stroke: var(--ct-color);
 }
 .ct-series-z .ct-slice-pie,
-.ct-series-z .ct-area {
+.ct-series-z .ct-area,
+.ct-series-z .ct-target-label,
+.ct-series-z .ct-band-area {
   fill: var(--ct-color);
 }