Add "sparkline" style shortcut. #4

typpo · Mar 25, 2019 · f760d85 · f760d85
1 parent 0d93b14
commit f760d85
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
diff --git a/lib/charts.js b/lib/charts.js
@@ -54,13 +54,35 @@ function renderChart(width, height, backgroundColor, untrustedChart) {
     return Promise.reject(new Error(`Invalid input\n${err}`));
   }
 
+  chart.options = chart.options || {};
+
   if (chart.type === 'donut') {
     // Fix spelling...
     chart.type = 'doughnut';
   }
 
+  if (chart.type === 'sparkline') {
+    if (chart.data.datasets.length > 1) {
+      return Promise.reject(new Error('"sparkline" only supports 1 line. Use "line" chart type for multiple lines.'));
+    }
+    chart.type = 'line';
+    if (!chart.data.labels && chart.data.datasets.length > 0) {
+      chart.data.labels = Array(chart.data.datasets[0].data.length);
+    }
+    chart.options.legend = chart.options.legend || {display: false};
+    if (!chart.options.elements) {
+      chart.options.elements = {};
+    }
+    chart.options.elements.line = chart.options.elements.line || {borderColor: '#000', borderWidth: 1};
+    chart.options.elements.point = chart.options.elements.point || {radius: 0};
+    if (!chart.options.scales) {
+      chart.options.scales = {};
+    }
+    chart.options.scales.yAxes = [{display: false}];
+    chart.options.scales.xAxes = [{display: false}];
+  }
+
   // Implement default options
-  chart.options = chart.options || {};
   chart.options.devicePixelRatio = 2.0;
   if (chart.type === 'bar' || chart.type === 'line' || chart.type === 'scatter' || chart.type === 'bubble') {
     if (!chart.options.scales) {

diff --git a/templates/index.html b/templates/index.html
@@ -44,6 +44,7 @@
 
     .col {
       flex: 1;
+      text-align: center;
     }
 
     .arrowcol {
@@ -86,6 +87,10 @@
       max-width: 100%;
     }
 
+    .img-example__sparkline {
+      max-width: 10em;
+    }
+
     code {
       overflow-x: scroll;
       max-width: 100%;
@@ -440,6 +445,21 @@ <h3>Radial Gauge / "Meter" Charts</h3>
         <img class="img-example" src="/chart?c={type:'radialGauge',data:{datasets:[{data:[70],backgroundColor:'green'}]}}"/>
       </div>
     </div>
+    <div class="hero panel">
+      <div class="col">
+        <h3>Sparklines</h3>
+        <p>
+          A sparkline is a special case of line graph with axes and other labeling removed. All <a href="https://www.chartjs.org/docs/latest/charts/line.html">line graph options</a> can be applied.
+        </p>
+        <code>
+    &lt;img src="https://quickchart.io/chart?c={<span class="hl">type:'sparkline'</span>,data:{datasets:[{data:[140,60,274,370,199]}]}}"&gt;
+        </code>
+      </div>
+      <div class="arrowcol"></div>
+      <div class="col">
+        <img class="img-example__sparkline" src="/chart?c={type:'sparkline',data:{datasets:[{data:[140,60,274,370,199]}]}}"/>
+      </div>
+    </div>
     <p>
       You can combine charts together by specifying different "types":
     </p>