💐 Vuetiful-Board is a beautiful layout using the Draggable Grid for Vue.js.

shopify draggable example, drag and drop chart javascript, js drag and drop library, draggable js examples, draggable html5, html draggable, draggable npm

Features

Drag and drop/resize

• The Vuetiful-board supports drag-and-drop and resizing functions.
• You can drag it in the desired direction and adjust the size freely.

Color Appearance

• Vuetiful-board can specify the color of the theme.
• You can freely decorate the chart with the color theme of the board you want.

Dark Mode

• The Vuetiful-board supports dark mode.
• When dark mode is selected, the graph, grid, and background colors become dark, and the font color reverses to white.

Monochrome

• Vuetiful-painting can be painted in monochrome.
• When monochrome is selected, the color of the histogram changes to the saturation and brightness of the corresponding color.

How to make use of it:

Install and download:

# NPM
$ npm i vuetiful-board --save

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

Draggable Chart Grid Libary For Vue, Vuetiful-Board Plugin/Github, draggable js tutorial

See Demo And Download

Official Website(medistream-team): Click Here

This superior jQuery/javascript plugin is developed by medistream-team. For extra Advanced Usages, please go to the official website.