js-charts

src/_data/charts.yml

@@ -1,9 +1,13 @@
 tasks:
   name: Tasks
-  type: spline
+  type: line
   categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W']
   groups: [1, 2, 3]
   hide-points: true
+  fill: true
+  remove-padding: true
+  hide-tooltip: true
+  legend-position: 'top'
   series:
     - name: 'New'
       color: blue
@@ -22,15 +26,16 @@ development-activity:
   hide-tooltip: true
   remove-padding: true
   legend-position: 'top'
+  fill: true
   series:
     - name: 'Purchases'
-      color: blue-dark
+      color: blue
       data: [30, 10, 10, 15, 0, 47, 65, 10]
     - name: 'Plans'
-      color: blue
+      color: blue-light
       data: [20, 25, 30, 35, 55, 42, 15, 25]
     - name: 'Services'
-      color: blue-light
+      color: blue-lighter
       data: [10, 30, 25, 30, 35, 15, 10, 15]
 
 employment:

src/_includes/js-charts.html

@@ -13,6 +13,13 @@ require(['c3', 'jquery'], function(c3, $) {
 					['data{{ forloop.index }}', {{ serie.data | join: ', '}}]{% unless forloop.last %},{% endunless %}{% endfor %}
 				],
 
+				{% if data.fill %}
+				classes: {
+                    {% for serie in data.series %}
+					data{{ forloop.index }}: 'filled'{% unless forloop.last %},{% endunless %}{% endfor %}
+				},
+        		{% endif %}
+
 				{% if data.show-labels %}
 				labels: true,
 				{% endif %}

src/assets/plugins/charts-c3/scss/_c3.scss

@@ -184,6 +184,10 @@
 	opacity: 0.1;
 }
 
+.c3-target-filled .c3-area {
+	opacity: 1 !important;
+}
+
 /*-- Arc --*/
 .c3-chart-arcs-title {
 	dominant-baseline: middle;