diff --git a/src/BaseCharts.js b/src/BaseCharts.js
new file mode 100644
index 0000000..e198bc3
--- /dev/null
+++ b/src/BaseCharts.js
@@ -0,0 +1,104 @@
+import Chart from 'chart.js'
+
+function generateChart (chartId, chartType) {
+  return {
+    render: function (createElement) {
+      return createElement(
+        'div', {
+          style: this.styles,
+          class: this.cssClasses
+        },
+        [
+          createElement(
+            'canvas', {
+              attrs: {
+                id: this.chartId,
+                width: this.width,
+                height: this.height
+              },
+              ref: 'canvas'
+            }
+          )
+        ]
+      )
+    },
+
+    props: {
+      chartId: {
+        default: chartId,
+        type: String
+      },
+      width: {
+        default: 400,
+        type: Number
+      },
+      height: {
+        default: 400,
+        type: Number
+      },
+      cssClasses: {
+        type: String,
+        default: ''
+      },
+      styles: {
+        type: Object
+      },
+      plugins: {
+        type: Array,
+        default () {
+          return []
+        }
+      }
+    },
+
+    data () {
+      return {
+        _chart: null,
+        _plugins: this.plugins
+      }
+    },
+
+    methods: {
+      addPlugin (plugin) {
+        this.$data._plugins.push(plugin)
+      },
+      renderChart (data, options) {
+        this.$data._chart = new Chart(
+          this.$refs.canvas.getContext('2d'), {
+            type: chartType,
+            data: data,
+            options: options,
+            plugins: this.$data._plugins
+          }
+        )
+      }
+    },
+    beforeDestroy () {
+      if (this.$data._chart) {
+        this.$data._chart.destroy()
+      }
+    }
+  }
+}
+
+export const Bar = generateChart('bar-chart', 'bar')
+export const HorizontalBar = generateChart('horizontalbar-chart', 'horizontalBar')
+export const Doughnut = generateChart('doughnut-chart', 'doughnut')
+export const Line = generateChart('line-chart', 'line')
+export const Pie = generateChart('pie-chart', 'pie')
+export const PolarArea = generateChart('polar-chart', 'polarArea')
+export const Radar = generateChart('radar-chart', 'radar')
+export const Bubble = generateChart('bubble-chart', 'bubble')
+export const Scatter = generateChart('scatter-chart', 'scatter')
+
+export default {
+  Bar,
+  HorizontalBar,
+  Doughnut,
+  Line,
+  Pie,
+  PolarArea,
+  Radar,
+  Bubble,
+  Scatter
+}
diff --git a/src/BaseCharts/Bar.js b/src/BaseCharts/Bar.js
deleted file mode 100644
index 41a0df6..0000000
--- a/src/BaseCharts/Bar.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import Chart from 'chart.js'
-
-export default {
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-  props: {
-    chartId: {
-      default: 'bar-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    },
-    plugins: {
-      type: Array,
-      default () {
-        return []
-      }
-    }
-  },
-  data () {
-    return {
-      _chart: null,
-      _plugins: this.plugins
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.$data._plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'bar',
-          data: data,
-          options: options,
-          plugins: this.$data._plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}
diff --git a/src/BaseCharts/Bubble.js b/src/BaseCharts/Bubble.js
deleted file mode 100644
index af104a7..0000000
--- a/src/BaseCharts/Bubble.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import Chart from 'chart.js'
-
-export default {
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'bubble-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    },
-    plugins: {
-      type: Array,
-      default () {
-        return []
-      }
-    }
-  },
-
-  data () {
-    return {
-      _chart: null,
-      _plugins: this.plugins
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.$data._plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'bubble',
-          data: data,
-          options: options,
-          plugins: this.$data._plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}
diff --git a/src/BaseCharts/Doughnut.js b/src/BaseCharts/Doughnut.js
deleted file mode 100644
index d106f90..0000000
--- a/src/BaseCharts/Doughnut.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import Chart from 'chart.js'
-
-export default {
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'doughnut-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    },
-    plugins: {
-      type: Array,
-      default () {
-        return []
-      }
-    }
-  },
-
-  data () {
-    return {
-      _chart: null,
-      _plugins: this.plugins
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.$data._plugins.push(plugin)
-    },
-
-    renderChart (data, options) {
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'doughnut',
-          data: data,
-          options: options,
-          plugins: this.$data._plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}
diff --git a/src/BaseCharts/HorizontalBar.js b/src/BaseCharts/HorizontalBar.js
deleted file mode 100644
index af07d88..0000000
--- a/src/BaseCharts/HorizontalBar.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import Chart from 'chart.js'
-
-export default {
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'horizontalbar-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    },
-    plugins: {
-      type: Array,
-      default () {
-        return []
-      }
-    }
-  },
-
-  data () {
-    return {
-      _chart: null,
-      _plugins: this.plugins
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.$data._plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'horizontalBar',
-          data: data,
-          options: options,
-          plugins: this.$data._plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}
diff --git a/src/BaseCharts/Line.js b/src/BaseCharts/Line.js
deleted file mode 100644
index 883a435..0000000
--- a/src/BaseCharts/Line.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import Chart from 'chart.js'
-
-export default {
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'line-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    },
-    plugins: {
-      type: Array,
-      default () {
-        return []
-      }
-    }
-  },
-
-  data () {
-    return {
-      _chart: null,
-      _plugins: this.plugins
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.$data._plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'line',
-          data: data,
-          options: options,
-          plugins: this.$data._plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}
diff --git a/src/BaseCharts/Pie.js b/src/BaseCharts/Pie.js
deleted file mode 100644
index e6c6144..0000000
--- a/src/BaseCharts/Pie.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import Chart from 'chart.js'
-
-export default {
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'pie-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    },
-    plugins: {
-      type: Array,
-      default () {
-        return []
-      }
-    }
-  },
-
-  data () {
-    return {
-      _chart: null,
-      _plugins: this.plugins
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.$data._plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'pie',
-          data: data,
-          options: options,
-          plugins: this.$data._plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}
diff --git a/src/BaseCharts/PolarArea.js b/src/BaseCharts/PolarArea.js
deleted file mode 100644
index 241e222..0000000
--- a/src/BaseCharts/PolarArea.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import Chart from 'chart.js'
-
-export default {
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'polar-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    },
-    plugins: {
-      type: Array,
-      default () {
-        return []
-      }
-    }
-  },
-
-  data () {
-    return {
-      _chart: null,
-      _plugins: this.plugins
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.$data._plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'polarArea',
-          data: data,
-          options: options,
-          plugins: this.$data._plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}
diff --git a/src/BaseCharts/Radar.js b/src/BaseCharts/Radar.js
deleted file mode 100644
index ed62e25..0000000
--- a/src/BaseCharts/Radar.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import Chart from 'chart.js'
-
-export default {
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'radar-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    },
-    plugins: {
-      type: Array,
-      default () {
-        return []
-      }
-    }
-  },
-
-  data () {
-    return {
-      _chart: null,
-      _plugins: this.plugins
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.$data._plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'radar',
-          data: data,
-          options: options,
-          plugins: this.$data._plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}
diff --git a/src/BaseCharts/Scatter.js b/src/BaseCharts/Scatter.js
deleted file mode 100644
index b1b099e..0000000
--- a/src/BaseCharts/Scatter.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import Chart from 'chart.js'
-
-export default {
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'scatter-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    },
-    plugins: {
-      type: Array,
-      default () {
-        return []
-      }
-    }
-  },
-
-  data () {
-    return {
-      _chart: null,
-      _plugins: this.plugins
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.$data._plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'scatter',
-          data: data,
-          options: options,
-          plugins: this.$data._plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}
diff --git a/src/examples/BarExample.js b/src/examples/BarExample.js
index 59edd65..b7822d0 100644
--- a/src/examples/BarExample.js
+++ b/src/examples/BarExample.js
@@ -1,4 +1,4 @@
-import Bar from '../BaseCharts/Bar'
+import { Bar } from '../BaseCharts'
 
 export default {
   extends: Bar,
diff --git a/src/examples/BubbleExample.js b/src/examples/BubbleExample.js
index 08b0929..55cbaee 100644
--- a/src/examples/BubbleExample.js
+++ b/src/examples/BubbleExample.js
@@ -1,4 +1,4 @@
-import Bubble from '../BaseCharts/Bubble'
+import { Bubble } from '../BaseCharts'
 
 export default {
   extends: Bubble,
diff --git a/src/examples/DoughnutExample.js b/src/examples/DoughnutExample.js
index d9024fe..046080d 100644
--- a/src/examples/DoughnutExample.js
+++ b/src/examples/DoughnutExample.js
@@ -1,4 +1,4 @@
-import Doughnut from '../BaseCharts/Doughnut'
+import { Doughnut } from '../BaseCharts'
 
 export default {
   extends: Doughnut,
diff --git a/src/examples/HorizontalBarExample.js b/src/examples/HorizontalBarExample.js
index f3652cf..a8463c3 100644
--- a/src/examples/HorizontalBarExample.js
+++ b/src/examples/HorizontalBarExample.js
@@ -1,4 +1,4 @@
-import HorizontalBar from '../BaseCharts/HorizontalBar'
+import { HorizontalBar } from '../BaseCharts'
 
 export default {
   extends: HorizontalBar,
diff --git a/src/examples/LineExample.js b/src/examples/LineExample.js
index eb645c9..f62517a 100644
--- a/src/examples/LineExample.js
+++ b/src/examples/LineExample.js
@@ -1,4 +1,4 @@
-import Line from '../BaseCharts/Line'
+import { Line } from '../BaseCharts'
 
 export default {
   extends: Line,
diff --git a/src/examples/PieExample.js b/src/examples/PieExample.js
index 5f62d93..6df72e4 100644
--- a/src/examples/PieExample.js
+++ b/src/examples/PieExample.js
@@ -1,4 +1,4 @@
-import Pie from '../BaseCharts/Pie'
+import { Pie } from '../BaseCharts'
 
 export default {
   extends: Pie,
diff --git a/src/examples/PolarAreaExample.js b/src/examples/PolarAreaExample.js
index 8ac67b7..ffa4439 100644
--- a/src/examples/PolarAreaExample.js
+++ b/src/examples/PolarAreaExample.js
@@ -1,4 +1,4 @@
-import PolarArea from '../BaseCharts/PolarArea'
+import { PolarArea } from '../BaseCharts'
 
 export default {
   extends: PolarArea,
diff --git a/src/examples/RadarExample.js b/src/examples/RadarExample.js
index 23017ca..5a48b47 100644
--- a/src/examples/RadarExample.js
+++ b/src/examples/RadarExample.js
@@ -1,4 +1,4 @@
-import Radar from '../BaseCharts/Radar'
+import { Radar } from '../BaseCharts'
 
 export default {
   extends: Radar,
diff --git a/src/examples/ReactiveExample.js b/src/examples/ReactiveExample.js
index ac6320f..283484a 100644
--- a/src/examples/ReactiveExample.js
+++ b/src/examples/ReactiveExample.js
@@ -1,4 +1,4 @@
-import Bar from '../BaseCharts/Bar'
+import { Bar } from '../BaseCharts'
 import reactiveData from '../mixins/reactiveData'
 
 export default {
diff --git a/src/examples/ReactivePropExample.js b/src/examples/ReactivePropExample.js
index b4489aa..8fa055a 100644
--- a/src/examples/ReactivePropExample.js
+++ b/src/examples/ReactivePropExample.js
@@ -1,4 +1,4 @@
-import Bar from '../BaseCharts/Bar'
+import { Bar } from '../BaseCharts'
 import reactiveProp from '../mixins/reactiveProp'
 
 export default {
diff --git a/src/examples/ScatterExample.js b/src/examples/ScatterExample.js
index 3e8d669..4542911 100644
--- a/src/examples/ScatterExample.js
+++ b/src/examples/ScatterExample.js
@@ -1,4 +1,4 @@
-import Scatter from '../BaseCharts/Scatter'
+import { Scatter } from '../BaseCharts'
 
 export default {
   extends: Scatter,
diff --git a/src/index.js b/src/index.js
index 3c0a52f..65376ca 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,14 +1,16 @@
-import Bar from './BaseCharts/Bar'
-import HorizontalBar from './BaseCharts/HorizontalBar'
-import Doughnut from './BaseCharts/Doughnut'
-import Line from './BaseCharts/Line'
-import Pie from './BaseCharts/Pie'
-import PolarArea from './BaseCharts/PolarArea'
-import Radar from './BaseCharts/Radar'
-import Bubble from './BaseCharts/Bubble'
-import Scatter from './BaseCharts/Scatter'
 import mixins from './mixins/index.js'
 import npmCfg from '../package.json'
+import {
+  Bar,
+  HorizontalBar,
+  Doughnut,
+  Line,
+  Pie,
+  PolarArea,
+  Radar,
+  Bubble,
+  Scatter
+} from './BaseCharts'
 
 const VueCharts = {
   version: npmCfg.version,