Draggable Chart Grid Libary For Vue – Vuetiful-Board

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
        },
      },
  ]"
/>

Preview:

Draggable Chart Grid Libary For Vue - Vuetiful-Board

Download Details:

Author: medistream-team

Live Demo: https://medistream-team.github.io/vuetiful-board/playground/Theme1.html

Download Link: https://github.com/medistream-team/vuetiful-board/archive/refs/heads/master.zip

Official Website: https://github.com/medistream-team/vuetiful-board

Install & Download:

# NPM
$ npm i vuetiful-board --save

You Might Be Interested In:

Add Comment