doc: Fixed documentation for CSS selectors with new specificity

site/code-snippets/colour-override-line-chart.css

@@ -1,9 +1,9 @@
-.ct-chart .ct-series.ct-series-a .ct-line,
-.ct-chart .ct-series.ct-series-a .ct-point {
+.ct-series-a .ct-line,
+.ct-series-a .ct-point {
   stroke: blue;
 }
 
-.ct-chart .ct-series.ct-series-b .ct-line,
-.ct-chart .ct-series.ct-series-b .ct-point {
+.ct-series-b .ct-line,
+.ct-series-b .ct-point {
   stroke: green;
 }

site/code-snippets/custom-style-bar-chart.css

@@ -1,5 +1,5 @@
 /* Use this selector to override bar styles on bar charts. Bars are also strokes so you have maximum freedom in styling them. */
-.ct-chart-bar .ct-series.ct-series-a .ct-bar {
+.ct-series-a .ct-bar {
   /* Colour of your bars */
   stroke: red;
   /* The width of your bars */

site/code-snippets/custom-style-donut-chart.css

@@ -1,5 +1,5 @@
-/* Donut charts get built from Pie charts but with a fundametal difference in the drawing approach. The donut is drawn using arc strokes for maximum freedom in styling */
-.ct-chart-pie .ct-series.ct-series-a .ct-slice.ct-donut {
+/* Donut charts get built from Pie charts but with a fundamentally difference in the drawing approach. The donut is drawn using arc strokes for maximum freedom in styling */
+.ct-series-a .ct-slice-donut {
   /* give the donut slice a custom colour */
   stroke: blue;
   /* customize stroke width of the donut slices in CSS. Note that this property is already set in JavaScript and label positioning also relies on this. In the right situation though it can be very useful to style this property. You need to use !important to override the style attribute */

site/code-snippets/custom-style-line-chart.css

@@ -1,5 +1,5 @@
 /* Use this selector to override the line style on a given series */
-.ct-chart-line .ct-series.ct-series-a .ct-line {
+.ct-series-a .ct-line {
   /* Set the colour of this series line */
   stroke: red;
   /* Control the thikness of your lines */
@@ -9,7 +9,7 @@
 }
 
 /* This selector overrides the points style on line charts. Points on line charts are actually just very short strokes. This allows you to customize even the point size in CSS */
-.ct-chart-line .ct-series.ct-series-a .ct-point {
+.ct-series-a .ct-point {
   /* Colour of your points */
   stroke: red;
   /* Size of your points */

site/code-snippets/custom-style-pie-chart.css

@@ -1,8 +1,8 @@
-/* Pie charts consist of solid slices where you can use this selector to override the default style. As the Pie chart is kind of a hybrid donut aswell, you need to distinguish with a :not pseudo class selector */
-.ct-chart-pie .ct-series.ct-series-a .ct-slice:not(.ct-donut) {
+/* Pie charts consist of solid slices where you can use this selector to override the default style. */
+.ct-series-a .ct-slice-pie {
   /* fill of the pie slieces */
   fill: hsl(120, 40%, 60%);
-  /* give your pie slices some outline or separate them visually by using the backrgound color here */
+  /* give your pie slices some outline or separate them visually by using the background color here */
   stroke: white;
   /* outline width */
   stroke-width: 4px;

site/examples/example-line-months-interpolation.js

@@ -25,4 +25,8 @@ var responsiveOptions = [
   ]
 ];
 
-new Chartist.Line('.ct-chart', data, null, responsiveOptions);
+new Chartist.Line('.ct-chart', data, {
+  chartPadding: {
+    top: 30
+  }
+}, responsiveOptions);

site/styles/_example-charts.scss

@@ -1,16 +1,14 @@
 #chartist-guy #chart-canvas {
   @include ct-chart($ct-text-color: darken($color-white, 50%), $ct-grid-color: darken($color-white, 20%));
 
-  .ct-series {
-    &.ct-series-a {
-      .ct-point {
-        @include ct-chart-point($ct-point-shape: square, $ct-point-size: 8px);
-      }
+  .ct-series-a {
+    .ct-point {
+      @include ct-chart-point($ct-point-shape: square, $ct-point-size: 8px);
+    }
 
-      .ct-line {
-        @include ct-chart-line($ct-line-dasharray: 5px);
-        @include animation(dashoffset, 1s linear infinite);
-      }
+    .ct-line {
+      @include ct-chart-line($ct-line-dasharray: 5px);
+      @include animation(dashoffset, 1s linear infinite);
     }
   }
 }
@@ -18,36 +16,34 @@
 #example-line-months-interpolation {
   @include ct-chart($ct-text-color: lighten($color-gray, 30%), $ct-grid-color: lighten($color-gray, 5%), $ct-grid-dasharray: 3px);
 
-  .ct-series {
-    &.ct-series-a {
-      .ct-point {
-        @include ct-chart-point($ct-point-shape: square);
-      }
-
-      .ct-line {
-        @include ct-chart-line($ct-line-width: 4px, $ct-line-dasharray: 5px);
-        @include animation(dashoffset, 1s linear infinite);
-      }
+  .ct-series-a {
+    .ct-point {
+      @include ct-chart-point($ct-point-shape: square);
     }
 
-    &.ct-series-b {
-      .ct-point {
-        @include animation(bouncing-stroke, 0.5s ease infinite);
-      }
+    .ct-line {
+      @include ct-chart-line($ct-line-width: 4px, $ct-line-dasharray: 5px);
+      @include animation(dashoffset, 1s linear infinite);
+    }
+  }
 
-      .ct-line {
-        @include ct-chart-line($ct-line-width: 3px);
-      }
+  .ct-series-b {
+    .ct-point {
+      @include animation(bouncing-stroke, 0.5s ease infinite);
     }
 
-    &.ct-series-c {
-      .ct-point {
-        @include animation(exploding-stroke, 1s ease-out infinite);
-      }
+    .ct-line {
+      @include ct-chart-line($ct-line-width: 3px);
+    }
+  }
 
-      .ct-line {
-        @include ct-chart-line($ct-line-width: 2px, $ct-line-dasharray: 40px 3px);
-      }
+  .ct-series-c {
+    .ct-point {
+      @include animation(exploding-stroke, 1s ease-out infinite);
+    }
+
+    .ct-line {
+      @include ct-chart-line($ct-line-width: 2px, $ct-line-dasharray: 40px 3px);
     }
   }
 }
@@ -56,4 +52,4 @@
   .ct-point {
     @include ct-chart-point($ct-point-size: 20px);
   }
-}
+}