💐 Vuetiful Board - A charts using draggable grid for Vue.js

# Explanation

# Chart


📊 You can easily create variable charts.


# series


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


//Example
series: [
          {
            name: 'Women',
            data: [25, 30, 64, 57, 50]
          },
          {
            name: 'Men',
            data: [30, 27, 56, 39, 70]
          }
        ],

        ...

# options


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 (opens new window)


//Example
options: {
          chart: {
            type: 'line',
          },
          title: {
            text: 'Growth Rate',
            align: 'center',
            style: {
              fontSize: '20px',
              fontWeight: 'bold',
            },
          },

          ...

# Grid


🖼 You can easily create a dragable and resized grid.

# x


This means the initial horizontal position of the item (as to which column to be placed).
The value must be a number.

# y


This means the initial vertical position of the item (in which row to be placed).
The value must be a number.

# w


This refers to the initial width of the item.

# h


This refers to the initial height of the item.

# i


This each serves as a unique identifier for grid items.
The value must be a string and not overlap.

# static


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.



//Example
x: 0, y: 0, w: 6, h: 12, i: '0', static: false

← Features →