Add height option to +chart and document

website/_includes/_mixins-base.jade

@@ -149,9 +149,9 @@ mixin terminal(label)
 //- Chart.js
     id - [string] chart ID, will be assigned as #chart_{id}
 
-mixin chart(id)
+mixin chart(id, height)
     figure.o-block&attributes(attributes)
-        canvas(id="chart_#{id}" width="800" height="400" style="max-width: 100%")
+        canvas(id="chart_#{id}" width="800" height=(height || "400") style="max-width: 100%")
 
 
 //- Gitter chat button and widget

website/styleguide.jade

@@ -332,6 +332,33 @@ include _includes/_mixins
             |  A new annotation tool for radically efficient machine teaching,
             |  powered by active learning.
 
+    +h(3, "chart") Chart
+
+    p
+        |  Charts are powered by #[+a("http://www.chartjs.org") chart.js] and
+        |  implemented via a mixin that creates the #[code canvas] element and
+        |  assigns the chart ID. The chart data itself is supplied in JavaScript.
+        |  Charts are mostly used to visualise and compare model accuracy scores
+        |  and speed benchmarks.
+
+    +aside-code("Usage", "jade").
+        +chart("accuracy")
+        script(src="/assets/js/chart.min.js")
+        script new Chart('chart_accuracy', { datasets: [] })
+
+    +grid
+        +grid-col("half")
+            +chart("accuracy", 400)
+
+        +grid-col("half")
+            +chart("speed", 300)
+
+    script(src="/assets/js/chart.min.js")
+    script.
+        Chart.defaults.global.defaultFontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+        new Chart('chart_accuracy', { type: 'bar', options: { legend: false, responsive: true, scales: { yAxes: [{ label: 'Accuracy', ticks: { suggestedMin: 70 } }], xAxes: [{ barPercentage: 0.425 }]}}, data: { labels: ['UAS', 'LAS', 'POS', 'NER F', 'NER P', 'NER R'], datasets: [{ label: 'en_core_web_sm', data: [91.49, 89.66, 97.23, 86.46, 86.78, 86.15], backgroundColor: '#09a3d5' }]}});
+        new Chart('chart_speed', { type: 'horizontalBar', options: { legend: false, responsive: true, scales: { xAxes: [{ label: 'Speed', ticks: { suggestedMin: 0 }}], yAxes: [{ barPercentage: 0.425 }]}}, data: { labels: ['w/s CPU', 'w/s GPU'], datasets: [{ label: 'en_core_web_sm', data: [9575, 25531], backgroundColor: '#09a3d5'}]}});
+
 +section("embeds")
     +h(2, "embeds") Embeds