Merge pull request #334 from apertureless/feature/custom_charts

Custom Charts

Author: apertureless

README.md

@@ -71,18 +71,6 @@ Vue.component('line-chart', {
 })
 ```
 
-
-### Browserify / Webpack 1
-
-If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
-
-However, Chart.js is a `peerDependencies` so you have to install it separately. In most projects This way, you can have different versions of Chart.js then in this package.
-
-### Webpack 2
-If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
-It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way your tree shaking will work.  Like in the bundled version, `Chart.js` is a `peerDependencies` and need to be installed.
-
-
 ## How to use
 
 You need to import the component and then either use `extends` or `mixins` and add it.

docs/README.md

@@ -99,14 +99,14 @@ export default {
 After you add your component you can use it:
 
 ```html
- <line-chart :data="{your data object}" :options="{your options}"></line-chart>
+ <line-chart :data="chartData" :options="chartOptions"></line-chart>
 ```
 
 If you want to overwrite width and height:
 
 ```html
  <line-chart
-  :data="{your data object}"
+  :data="chartData"
   :options="{responsive: false, maintainAspectRatio: false}"
   :width="400"
   :height="200"
@@ -279,6 +279,36 @@ mounted () {
   })
 }
 ```
+## Custom / New Charts
+
+Sometimes you need to extend the default Chart.js charts. There are a lot of examples how to extend and modify the default charts. Or you want to create a own chart type.
+
+In `vue-chartjs` you can do this pretty much the same way.
+
+```js
+// 1. Import Chart.js so you can use the global Chart object
+import Chart from 'chart.js'
+// 2. Import the `generateChart()` method to create the vue component.
+import { generateChart } from 'vue-chartjs'
+
+// 3. Extend on of the default charts
+// http://www.chartjs.org/docs/latest/developers/charts.html
+Chart.defaults.LineWithLine = Chart.defaults.line;
+Chart.controllers.LineWithLine = Chart.controllers.line.extend({ /* custom magic here */})
+
+// 4. Generate the vue-chartjs component
+// First argument is the chart-id, second the chart type.
+const CustomLine = generateChart('custom-line', 'LineWithLine')
+
+// 5. Extend the CustomLine Component just like you do with the default vue-chartjs charts.
+
+export default {
+  extends: CustomLine,
+  mounted () {
+    // ....
+  }
+}
+```
 
 ## Available Charts
 
@@ -318,36 +348,6 @@ This chart has a different data structure then the others. Right now the reactiv
 
 ![Scatter](assets/scatter.png)
 
-
-## Explanation of Different Builds
-There are three different entry points. It depends on your build setup. The dependencies are bundled or required as a peerDependency.
-
-- Browser
-- Browserify / Webpack 1
-- Webpack 2
-
-
-| Build | Chart.js | Vue.js |
-|---|---|---|
-| vue-chartjs.full.js | Bundled | Bundled |
-| vue-chartjs.full.min.js |  Bundled | Bundled  |
-| vue-chartjs.js | peerDependency | peerDependency  |
-| vue-chartjs.min.js | peerDependency  | peerDependency  |
-| es/index* |  peerDependency | peerDependency  |
-
-### Browser
-You can use `vue-chartjs` directly in the browser without any build setup, like in this [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). In this case, please use the `vue-chartjs.full.min.js` which is the minified version. It has Vue.js and Chart.js bundled into it and is bundled to a UMD module, so you only need that one file.
-
-
-### Browserify / Webpack 1
-
-If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
-
-However Vue.js and Chart.js are `peerDependencies` so you have to install them separately. In most projects you will have Vue.js already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
-
-### Webpack 2
-If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point, which is `es/index.js`. It is a __transpiled__ es version of the source and is not __bundled__ to a module. This way your tree shaking will work.  Like in the bundled version, Vue.js and Chart.js are `peerDependencies` and need to be installed.
-
 ## Resources
 
 You can find here some resources like tutorials on how to use `vue-chartjs`

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
+      }
+    })
+  }
+}