feat(charts): Export generateChart to create custom charts

Author: apertureless

src/BaseCharts.js

@@ -1,6 +1,6 @@
 import Chart from 'chart.js'
 
-function generateChart (chartId, chartType) {
+export function generateChart (chartId, chartType) {
   return {
     render: function (createElement) {
       return createElement(

src/examples/App.vue

@@ -2,57 +2,61 @@
   <div class="container">
     <div class="Chart">
       <h1 style="text-align:center;">Barchart</h1>
-      <bar-example></bar-example>
+      <bar-example/>
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Horizontal Barchart</h1>
-      <horizontal-bar-example></horizontal-bar-example>
+      <horizontal-bar-example/>
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Barchart with reactive mixing for live data</h1>
-      <reactive-example></reactive-example>
+      <reactive-example/>
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Barchart with reactive mixing for live data as props</h1>
-      <reactive-prop-example :chart-data="dataPoints"></reactive-prop-example>
+      <reactive-prop-example :chart-data="dataPoints"/>
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Linechart</h1>
-      <line-example></line-example>
+      <line-example/>
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Doughnutchart</h1>
-      <doughnut-example></doughnut-example>
+      <doughnut-example/>
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Piechart</h1>
-      <pie-example></pie-example>
+      <pie-example/>
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Radarchart</h1>
-      <radar-example></radar-example>
+      <radar-example/>
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Polararea</h1>
-      <polar-area-example></polar-area-example>
+      <polar-area-example/>
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Bubblechart</h1>
-      <bubble-example></bubble-example>
+      <bubble-example />
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Scatter Chart</h1>
-      <scatter-example></scatter-example>
+      <scatter-example />
+    </div>
+    <div class="Chart">
+      <h1 style="text-align:center;">Custom Line Chart</h1>
+      <custom-line />
     </div>
   </div>
 </template>
@@ -69,12 +73,14 @@
   import ReactivePropExample from './ReactivePropExample'
   import ScatterExample from './ScatterExample'
   import HorizontalBarExample from './HorizontalBarExample'
+  import CustomLine from './CustomExample'
 
   export default {
     components: {
       BarExample,
       LineExample,
       DoughnutExample,
+      CustomLine,
       PieExample,
       RadarExample,
       PolarAreaExample,

src/examples/CustomExample.js

@@ -0,0 +1,51 @@
+import Chart from 'chart.js'
+import { generateChart } from '../BaseCharts'
+
+Chart.defaults.LineWithLine = Chart.defaults.line
+Chart.controllers.LineWithLine = Chart.controllers.line.extend({
+  draw: function (ease) {
+    Chart.controllers.line.prototype.draw.call(this, ease)
+
+    if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
+      let activePoint = this.chart.tooltip._active[0]
+      let ctx = this.chart.ctx
+      let x = activePoint.tooltipPosition().x
+      let topY = this.chart.scales['y-axis-0'].top
+      let bottomY = this.chart.scales['y-axis-0'].bottom
+
+      // draw line
+      ctx.save()
+      ctx.beginPath()
+      ctx.moveTo(x, topY)
+      ctx.lineTo(x, bottomY)
+      ctx.lineWidth = 2
+      ctx.strokeStyle = '#07C'
+      ctx.stroke()
+      ctx.restore()
+    }
+  }
+})
+
+const LineWithLine = generateChart('line-with-chart', 'LineWithLine')
+
+export default {
+  extends: LineWithLine,
+  mounted () {
+    this.renderChart({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+      datasets: [
+        {
+          label: 'Data One',
+          backgroundColor: '#f87979',
+          data: [40, 39, 10, 40, 39, 80, 40]
+        }
+      ]
+    }, {
+      responsive: true,
+      maintainAspectRatio: false,
+      tooltips: {
+        intersect: false
+      }
+    })
+  }
+}