chart bg fix

src/_includes/cards/chart-bg.html

@@ -14,6 +14,6 @@
 	</div>
 </div>
 
-{% contentfor scripts %}
+<script>
 {% include js/chart-bg.js id=include.id color=color %}
-{% endcontentfor %}
+</script>

src/_includes/js/chart-bg.js

@@ -1,56 +1,58 @@
-require(['c3'], function (c3) {
+require(['c3', 'jquery'], function (c3, $) {
-	var chart = c3.generate({
+	$(document).ready(function() {
-		bindto: '#{{ include.id }}',
+		var chart = c3.generate({
-		padding: {
+			bindto: '#{{ include.id }}',
-			bottom: -10,
+			padding: {
-			left: -1,
+				bottom: -10,
-			right: -1
+				left: -1,
-		},
+				right: -1
-		data: {
-			names: {
-				data1: 'Users online',
 			},
-			columns: [
+			data: {
-				['data1', 30, 40, 10, 40, 12, 22, 40],
+				names: {
-			],
+					data1: 'Users online'
-			type: 'area'
-		},
-		legend: {
-			show: false
-		},
-		transition: {
-			duration: 0
-		},
-		point: {
-			show: false
-		},
-		tooltip: {
-			format: {
-				title: function (x) {
-					return '';
-				}
-			}
-		},
-		axis: {
-			y: {
-				padding: {
-					bottom: 0,
 				},
-				show: false,
+				columns: [
-				tick: {
+					['data1', 30, 40, 10, 40, 12, 22, 40]
-					outer: false
+				],
-				}
+				type: 'area'
 			},
-			x: {
+			legend: {
-				padding: {
-					left: 0,
-					right: 0,
-				},
 				show: false
+			},
+			transition: {
+				duration: 0
+			},
+			point: {
+				show: false
+			},
+			tooltip: {
+				format: {
+					title: function (x) {
+						return '';
+					}
+				}
+			},
+			axis: {
+				y: {
+					padding: {
+						bottom: 0,
+					},
+					show: false,
+					tick: {
+						outer: false
+					}
+				},
+				x: {
+					padding: {
+						left: 0,
+						right: 0
+					},
+					show: false
+				}
+			},
+			color: {
+				pattern: ['{{ site.colors[include.color].hex }}']
 			}
-		},
+		});
-		color: {
-			pattern: ['{{ site.colors[include.color] }}']
-		}
 	});
 });