Draggable Chart Grid Libary For Vue - Vuetiful-Board

Install & Download:

# NPM
$ npm i vuetiful-board --save

Description:

Vuetiful-Board is a JavaScript library for creating draggable charts and grids.

Features:

4 build-in themes
Dark & Light mode.
Editable layout

How to use it:

1. Import the Vuetiful-Board library.

import VuetifulBoard from 'vuetiful-board'
Vue.use(VuetifulBoard)

2. Draw a basic chart grid.

<vuetiful-board
  :theme="classic"
  :dark-mode="true"
  :col-num="12"
  :row-height="30"
  :layout-editable="true"
  :datasets="[
    {
        chartInfo: {
          series: [200, 12, 40, 25, 34, 6, 23],
          options: {
            chart: {
              type: 'pie',
            },
            title: {
              text: 'The recent inflow route',
              align: 'center',
              style: {
                fontSize: '18px',
                fontWeight: 'bold',
              },
            },
            labels: [
              'SNS',
              'Recommend',
              'Homepage',
              'Blog',
              'Kakaotalk Channel',
              'Rumor',
              'ETC',
            ],
            fill: {
              opacity: 1,
            },
            legend: {
              position: 'bottom',
            }
          }
        },
        gridInfo: {
          x: 6, y: 0, w: 6, h: 12, i: '1', static: false
        },
      },
  ]"
/>

3. Possible props.

<vuetiful-board
  :theme="classic"
  :dark-mode="true"
  :col-num="12"
  :row-height="30"
  :layout-editable="true"
  :datasets="[
    {
        chartInfo: {
          series: [200, 12, 40, 25, 34, 6, 23],
          options: {
            chart: {
              type: 'pie',
            },
            title: {
              text: 'The recent inflow route',
              align: 'center',
              style: {
                fontSize: '18px',
                fontWeight: 'bold',
              },
            },
            labels: [
              'SNS',
              'Recommend',
              'Homepage',
              'Blog',
              'Kakaotalk Channel',
              'Rumor',
              'ETC',
            ],
            fill: {
              opacity: 1,
            },
            legend: {
              position: 'bottom',
            }
          }
        },
        gridInfo: {
          x: 6, y: 0, w: 6, h: 12, i: '1', static: false
        },
      },
  ]"
/>