diff --git a/modules/system/assets/ui/docs/chart.md b/modules/system/assets/ui/docs/chart.md
index 8e32176d6..cd576fe6b 100644
--- a/modules/system/assets/ui/docs/chart.md
+++ b/modules/system/assets/ui/docs/chart.md
@@ -19,6 +19,26 @@ The pie chart outputs information as a circle diagram, with optional label in th
 
 ![image](https://github.com/octobercms/docs/blob/master/images/traffic-sources.png?raw=true) {.img-responsive .frame}
 
+<a name="line-chart" class="anchor" href="#line-chart"></a>
+## Line chart
+
+The next example shows a line chart markup. Data sets are defined with the SPAN elements inside the chart element.
+
+    <div
+        data-control="chart-line"
+        data-time-mode="weeks"
+        class="height-200"
+        data-chart-options="xaxis: {mode: 'time'}">
+        <span 
+            data-chart="dataset" 
+            data-set-color="#008dc9"
+            data-set-data="[1477857082000, 400], [1477943482000, 380], [1478029882000, 340], [1478116282000, 540], [1478202682000, 440], [1478289082000, 360], [1478375482000, 220]"
+            data-set-name="Visits">
+        </span>
+    </div>
+
+![image](https://github.com/octobercms/docs/blob/master/images/line-chart.png?raw=true) {.img-responsive .frame}
+
 <a name="bar-chart" class="anchor" href="#bar-chart"></a>
 ## Bar chart