Vue.js wrapper for sChart.js: Simple HTML5 charts

vue-schart

Create simple charts by using a Vue.js component- wrapper for sChart.js with a variety of options and styles. sChart.js, small & simple HTML5 charts.

With vue-sChart you can create:

• Bar Charts
• Line Charts
• Pie Charts
• Ring Charts

Checkout the Interactive Demo.

Example

Installation & Usage

npm install vue-schart -S

In a *.vue file

<template>
  <div id="app">
    <div>
    <schart :canvasId="canvasId"
    :type="type"
    :width="width"
    :height="height"
    :data="data"
    :options="options"
    ></schart>
    </div>
  </div>
</template>

<script>
import Schart from 'vue-schart'

export default {
  name: 'hello',
  components: {
    Schart
  },
  data () {
    return {
      canvasId: 'myCanvas',
      type: 'line',
      width: 800,
      height: 600,
      data: [
        {name: '1999', value: 109},
        {name: '2000 ', value: 102},
        {name: '2001 ', value: 102},
        {name: '2002 ', value: 98},
        {name: '2003 ', value: 85},
        {name: '2004 ', value: 95}
      ],
      options: {
        padding: 130,
        bgColor: '#76a8f7', // the background color of chart. Default is '#ffffff'.
        fillColor: '#42f4df',    // the color of bar chart or line chart.
        title: 'Number people who drowned by falling into a swimming-pool', // The title of chart. Default is null.
        titleColor: '#000000', // Title Color. Default is '#000000'.
        titlePosition: 'top', // String.Title position. Default is 'top'.
        legendColor: '#000000', // color of the legend text
        legendTop: 40, // Legend position of top. Default is 40.
        yEqual: 6  // The number of points on the Y axis.
      }
    }
  }
}
</script>

For more info regarding the available options refer to the documentation for sChart.js.

Result:

If you would like to use and contribute to vue-schart, find the repo on GitHub.