Added simple area shape functionality to the line chart

source/scripts/chartist.line.js

@@ -56,6 +56,10 @@
    *   showLine: true,
    *   // If dots should be drawn or not
    *   showPoint: true,
+   *   // If the line chart should draw an area
+   *   showArea: false,
+   *   // The base for the area chart that will be used to close the area shape (is normally 0)
+   *   areaBase: 0,
    *   // Specify if the lines should be smoothed (Catmull-Rom-Splines will be used)
    *   lineSmooth: true,
    *   // Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value
@@ -71,6 +75,7 @@
    *     series: 'ct-series',
    *     line: 'ct-line',
    *     point: 'ct-point',
+   *     area: 'ct-area',
    *     grid: 'ct-grid',
    *     vertical: 'ct-vertical',
    *     horizontal: 'ct-horizontal'
@@ -155,6 +160,8 @@
         height: undefined,
         showLine: true,
         showPoint: true,
+        showArea: false,
+        areaBase: 0,
         lineSmooth: true,
         low: undefined,
         high: undefined,
@@ -165,6 +172,7 @@
           series: 'ct-series',
           line: 'ct-line',
           point: 'ct-point',
+          area: 'ct-area',
           grid: 'ct-grid',
           vertical: 'ct-vertical',
           horizontal: 'ct-horizontal'
@@ -257,27 +265,49 @@
           }
         }
 
-        if (options.showLine) {
-          var svgPathString = 'M' + pathCoordinates[0] + ',' + pathCoordinates[1] + ' ';
+        // TODO: Nicer handling of conditions, maybe composition?
+        if (options.showLine || options.showArea) {
+          // TODO: We should add a path API in the SVG library for easier path creation
+          var pathElements = ['M' + pathCoordinates[0] + ',' + pathCoordinates[1]];
 
           // If smoothed path and path has more than two points then use catmull rom to bezier algorithm
           if (options.lineSmooth && pathCoordinates.length > 4) {
 
             var cr = Chartist.catmullRom2bezier(pathCoordinates);
             for(var k = 0; k < cr.length; k++) {
-              svgPathString += 'C' + cr[k].join();
+              pathElements.push('C' + cr[k].join());
             }
           } else {
             for(var l = 3; l < pathCoordinates.length; l += 2) {
-              svgPathString += 'L ' + pathCoordinates[l - 1] + ',' + pathCoordinates[l];
+              pathElements.push('L' + pathCoordinates[l - 1] + ',' + pathCoordinates[l]);
             }
           }
 
-          seriesGroups[i].elem('path', {
-            d: svgPathString
-          }, options.classNames.line, true).attr({
-            'values': normalizedData[i]
-          }, Chartist.xmlNs.uri);
+          if(options.showArea) {
+            // If we need to draw area shapes we just make a copy of our pathElements SVG path array
+            var areaPathElements = pathElements.slice();
+            // We project the areaBase value into screen coordinates
+            var areaBaseProjected = Chartist.projectPoint(chartRect, bounds, [options.areaBase], 0);
+            // And splice our new area path array to add the missing path elements to close the area shape
+            areaPathElements.splice(0, 0, 'M' + areaBaseProjected.x + ',' + areaBaseProjected.y);
+            areaPathElements[1] = 'L' + pathCoordinates[0] + ',' + pathCoordinates[1];
+            areaPathElements.push('L' + pathCoordinates[pathCoordinates.length - 2] + ',' + areaBaseProjected.y);
+
+            // Create the new path for the area shape with the area class from the options
+            seriesGroups[i].elem('path', {
+              d: areaPathElements.join('')
+            }, options.classNames.area, true).attr({
+              'values': normalizedData[i]
+            }, Chartist.xmlNs.uri);
+          }
+
+          if(options.showLine) {
+            seriesGroups[i].elem('path', {
+              d: pathElements.join('')
+            }, options.classNames.line, true).attr({
+              'values': normalizedData[i]
+            }, Chartist.xmlNs.uri);
+          }
         }
       }
     }

source/site/data/pages/examples.yml

@@ -29,6 +29,26 @@ sections:
                    Adding behavior to your chart with JavaScript is a breeze and is just like any other DOM manipulation
                    you do to your site. This is just one of many benefits of using inline-SVG and provides you with the
                    freedom you need in order to create exactly the experience you're looking for.
+      - type: live-example
+        data:
+          title: Line chart with area
+          level: 4
+          id: example-line-area
+          classes: ct-golden-section
+          intro: >
+                   This chart uses the showArea option to draw line, dots but also an area shape. Use the low option to
+                   specify a fixed lower bound that will make the area expand. You can also use the areaBase property
+                   to specify a data value that will be used to determine the area shap base position (this is 0 by default).
+      - type: live-example
+        data:
+          title: Bi-polar Line chart with area only
+          level: 4
+          id: example-bipolar-line-area
+          classes: ct-golden-section
+          intro: >
+                   You can also only draw the area shapes of the line chart. Area shapes will always be constructed around
+                   their areaBase (that can be configured in the options) which also allows you to draw nice bi-polar
+                   areas.
   - title: Bar chart examples
     level: 3
     items:

source/site/examples/example-bipolar-line-area.js

@@ -0,0 +1,19 @@
+Chartist.Line('.ct-chart', {
+  labels: [1, 2, 3, 4, 5, 6, 7, 8],
+  series: [
+    [1, 2, 3, 1, -2, 0, 1, 0],
+    [-2, -1, -2, -1, -2.5, -1, -2, -1],
+    [0, 0, 0, 1, 2, 2.5, 2, 1],
+    [2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
+  ]
+}, {
+  high: 3,
+  low: -3,
+  showArea: true,
+  showLine: false,
+  showPoint: false,
+  axisX: {
+    showLabel: false,
+    showGrid: false
+  }
+});

source/site/examples/example-line-area.js

@@ -0,0 +1,9 @@
+Chartist.Line('.ct-chart', {
+  labels: [1, 2, 3, 4, 5, 6, 7, 8],
+  series: [
+    [5, 9, 7, 8, 5, 3, 5, 4]
+  ]
+}, {
+  low: 0,
+  showArea: true
+});

source/styles/chartist.scss

@@ -59,6 +59,11 @@
   }
 }
 
+@mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) {
+  stroke: none;
+  fill-opacity: $ct-area-opacity;
+}
+
 @mixin ct-chart-bar($ct-bar-width: $ct-bar-width) {
   fill: none;
   stroke-width: $ct-bar-width;
@@ -74,7 +79,7 @@
     stroke: $color;
   }
 
-  .#{$ct-class-slice}:not(.#{$ct-class-donut}) {
+  .#{$ct-class-slice}:not(.#{$ct-class-donut}), .#{$ct-class-area} {
     fill: $color;
   }
 }
@@ -96,6 +101,10 @@
     @include ct-chart-line($ct-line-width);
   }
 
+  .#{$ct-class-area} {
+    @include ct-chart-area();
+  }
+
   .#{$ct-class-bar} {
     @include ct-chart-bar($ct-bar-width);
   }

source/styles/settings/_chartist-settings.scss

@@ -11,6 +11,7 @@ $ct-class-label: ct-label !default;
 $ct-class-series: ct-series !default;
 $ct-class-line: ct-line !default;
 $ct-class-point: ct-point !default;
+$ct-class-area: ct-area !default;
 $ct-class-bar: ct-bar !default;
 $ct-class-slice: ct-slice !default;
 $ct-class-donut: ct-donut !default;
@@ -36,6 +37,8 @@ $ct-line-dasharray: false !default;
 $ct-point-size: 10px !default;
 // Line chart point, can be either round or square
 $ct-point-shape: round !default;
+// Area fill transparency between 0 and 1
+$ct-area-opacity: 0.1 !default;
 
 // Bar chart bar width
 $ct-bar-width: 10px !default;