# Properties

# 🖼 Grids

# colNum

type: Number

required: true

default: 12

Says how many columns the grid has.

The value should be a natural number.

# rowHeight

type: Number

required: true

default: 30

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

The value should be a natural number.

# layoutEditable

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

# datasets

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. If you want more detail information of datasets elements, please refer to this page. explanation


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

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

# theme

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


[
  {
    "name": "classic",
    "colors": [
      "#5975fe",
      "#54d2d2",
      "#ffcb00",
      "#ff6150",
      "#1360bf",
      "#62a1b3",
      "#ffa395",
      "#b37268",
      "#5cd184",
      "#ffff00"
    ]
  },
  {
    "name": "rainbow",
    "colors": [
      "#e74645",
      "#fb7756",
      "#facd60",
      "#38ada9",
      "#1e3799",
      "#6a4fa5",
      "#faa3ba",
      "#ffc145",
      "#264e70",
      "#679186"
    ]
  },
  {
    "name": "vintage",
    "colors": [
      "#004e89",
      "#6b51a4",
      "#fcba04",
      "#a50104",
      "#590004",
      "#3867d6",
      "#3cbbb1",
      "#fab1a0",
      "#fdcb6e",
      "#4b6584"
    ]
  },
  {
    "name": "retro",
    "colors": [
      "#38e0ec",
      "#5b9279",
      "#8fcb9b",
      "#324376",
      "#8f8073",
      "#dd614a",
      "#fa824c",
      "#6b6ed1",
      "#f7c548",
      "#63d2ff"
    ]
  },
  {
    "name": "green",
    "colors": [
      "#277f8e",
      "#77AD78",
      "#365c8d",
      "#4ac16d",
      "#46337e",
      "#9fda3a",
      "#3867d6",
      "#440154",
      "#1fa187",
      "#4b6584"
    ]
  }
]

# darkMode

type: Boolean

default: false

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

← Usage Explanation →