Home
Chart & Graph
Draggable Chart Grid Libary For Vue – Vuetiful-Board

Draggable Chart Grid Libary For Vue – Vuetiful-Board

medistream-team Last Updated: 8 months ago

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

Changelog:

v0.3.5 (12/14/2021)

  • Add: make it possible to receive responsive related props

v0.3.4 (12/02/2021)

  • Modify: fixed a bug where monochrome was not applied

v0.3.2 (11/10/2021)

  • Modify: enable undefined theme values

v0.3.1 (11/08/2021)

  • Modify: fix an error occurs when using an array of themes

v0.3.0 (11/03/2021)

  • apply the changed monochrome prop

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

Related Posts

Add Comment