Javascript Vue

A Beautiful Chart Using Draggable Grid For Vue.js4 min read


A Beautiful Chart Using Draggable Grid For Vue.js.


npm install vuetiful-board

import VuetifulBoard from ‘vuetiful-board’



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: [
‘Kakaotalk Channel’,
fill: {
opacity: 1,
legend: {
position: ‘bottom’,
gridInfo: {
x: 6, y: 0, w: 6, h: 12, i: ‘1’, static: false


🖼 Grids


type: Number
required: true
default: 12

Says how many columns the grid has.

The value should be a natural number.


type: Number
required: true
default: 30

Says what is a height of a single row in pixels.

The value should be a natural number.


type: Boolean
required: true
default: true

Says when to decide whether to edit the layout.

The default value is true, and layout editing is basically possible.

And if the default is changed to false, layout editing becomes impossible.

📊 Charts


type: Array
required: true
default: true

This is where you have to enter the direct data you will use.

Dataset requires basic information on charts and elements related to grids.

Datasets basically takes this form.

datasets: {
chartInfo: {},
gridInfo: {}

If no content is entered into the dataset, a basic chart form with no information will appear.


type: String
default: palette[0].name

Use it if you want to change the theme of the chart fluidly.

Basically, there are five themes provided: classic, retro, green, vintage, and rainbow.

As in the example below, a color palette may be set as desired.

If you want to use color palette for theme, you can refer this page palette.json

“name”: “classic”,
“colors”: [
“name”: “rainbow”,
“colors”: [
“name”: “vintage”,
“colors”: [
“name”: “retro”,
“colors”: [
“name”: “green”,
“colors”: [


type: Boolean
default: false

Says if you want to set the dark mode (switch effect of background and font color).



📊 You can easily create variable charts.


This contains the direct data essential for the chart. You can specify the type or name of each chart data.

series: [
name: ‘Women’,
data: [25, 30, 64, 57, 50]
name: ‘Men’,
data: [30, 27, 56, 39, 70]


This determines the shape of the chart and includes style elements such as the title or font size of the chart.

Vuetiful-board basically follows the internal configuration of apexchart.
Therefore, please refer to this page if you want more detailed information. apexchart

options: {
chart: {
type: ‘line’,
title: {
text: ‘Growth Rate’,
align: ‘center’,
style: {
fontSize: ’20px’,
fontWeight: ‘bold’,


🖼 You can easily create a dragable and resized grid.


This means the initial horizontal position of the item (as to which column to be placed).

The value must be a number.


This means the initial vertical position of the item (in which row to be placed).

The value must be a number.


This refers to the initial width of the item.


This refers to the initial height of the item.


This each serves as a unique identifier for grid items.

The value must be a string and not overlap.


This determines whether to modify (draggable & resize) the item.
If you want the item to be fixed, it should be false, otherwise, it should be true.

x: 0, y: 0, w: 6, h: 12, i: ‘0’, static: false


Drag & Drop / Resize

Vuetiful-board supports drag & drop and resize functions.
You can drag it in the desired direction and adjust the size freely.


Color Theme

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

If you’re curious about how to designate a pallet, please refer to this page. properties


switchTheme(themeName) {
this.theme = themeName;

Dark Mode

Vuetiful-board supports dark mode.
When dark mode is selected, both the chart, grid, and background colors become dark, and the font color is reversed to white.



Vuetiful-board can be painted with monochrome.
When monochrome is selected, the chart color changes to saturation and brightness of the corresponding color.

setMonochromeColor(event) {
this.theme =;

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest