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:
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