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