# Quick styling toolbar

### **Box**

When you style a box, it means that you style all components in your chart

Elements in Box include:

* Text color
* Background color
* Boder (Weight, Radius, Border line, Border color)
* Shadow

<figure><img src="https://1648695648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FygZlXb1uCVgursV03Kgn%2Fuploads%2FlXPZDhPv2SYUNwW8fLry%2Fbox.gif?alt=media&#x26;token=203e79b2-8f9c-4701-ae60-fe21b2c4b2a6" alt=""><figcaption></figcaption></figure>

### **Title**

Style elements for Title

* Font text
* Font size
* Text format (Bold, Italic)
* Title color

<figure><img src="https://1648695648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FygZlXb1uCVgursV03Kgn%2Fuploads%2Fq1TmdlVjjtMalHkC8rMK%2Ftitle.gif?alt=media&#x26;token=639496db-67f0-4b14-8627-d60d3c0dfd0b" alt=""><figcaption></figcaption></figure>

### **Header**

{% hint style="info" %}
Apply for table chart&#x20;
{% endhint %}

You can click the header section or click “Header” in the toolbar

Below are some options you can see to style the header (name of column) in the table From the left to the right, let’s discover

Font family: Change the font of your header&#x20;

Fontsize: Change the size of your header&#x20;

Bold: Bold your header&#x20;

Italic: Format your header with italic side&#x20;

Text Color: Color your header&#x20;

Fill color: Fill color to your header area&#x20;

Text Alignment: Align your header to the left, central, right&#x20;

<figure><img src="https://1648695648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FygZlXb1uCVgursV03Kgn%2Fuploads%2FHbTvORDLbJayvyry842m%2Fheader-table.gif?alt=media&#x26;token=d9eaf02d-0de0-4692-b701-c086cd653387" alt=""><figcaption></figcaption></figure>

### **Legend**

A legend is an explanation of characters, symbols in chart. Like style title, there are some options you can do to style legend

* Font text for legend
* Font size
* &#x20;Legend text format (Bold, Italic)
* &#x20;Legend color

<figure><img src="https://1648695648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FygZlXb1uCVgursV03Kgn%2Fuploads%2FUYtmoVpy22EdRaDjJ6b9%2Flegend.gif?alt=media&#x26;token=b11775f6-50d7-486a-b108-4b8b0418ff11" alt=""><figcaption></figcaption></figure>

### **Graph**

<figure><img src="https://1648695648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FygZlXb1uCVgursV03Kgn%2Fuploads%2FZAFrUnLLH9b7dGhjSj0m%2Fgraph.gif?alt=media&#x26;token=35207dc9-3bfe-407a-92ec-4db34dd94aad" alt=""><figcaption></figcaption></figure>

#### **Bar chart**

You can enable&#x20;

Bar stacking

Set stacking percentage

Unit type: choose unit type for your label

* Digital storage: B, KB, MB, GB, TB. For example: 1MB = 1024B
* Digital storage 10 base: B, KB, MB, GB, TB. For example: 1MB = 1000B
* Metric length: Mm, cm, dm, m, dam, hm, km
* Percentage: %
* Time: Microseconds, milliseconds, seconds, minutes, hours
* Other

**For data label, there are many choices you should style:**

Enable data labels: labels will show on bar graph

Label position: Above, Center, Below

Label orientation: Vertical, Horizontal

Font family: Choose font family for the label

Font size: Choose font size for the label

Font format : Bold, Italic

Color: Color your label

#### **Pie graph**

Chart type: Pie chart and donut-pie chart

Donut style: Choose inner radius to select the thick of donut chart

Slice label: Allow to choose percentage or label

Unit:

* Digital storage: B, KB, MB, GB, TB. For example: 1MB = 1024B
* Digital storage 10 base: B, KB, MB, GB, TB. For example: 1MB = 1000B
* Metric length: Mm, cm, dm, m, dam, hm, km
* Percentage: %
* Time: Microseconds, milliseconds, seconds, minutes, hours
* Other

**For data label, there are many choices you should style:**

Enable data labels: labels will show on bar graph

Label position: Above, Center, Below

Label orientation: Vertical, Horizontal

Font family: Choose font family for the label

Font size: Choose font size for the label

Font format : Bold, Italic

Color: Color your label

#### Line chart

Line style: Enable stacking line or/ and 100% stacking

**For data label, there are many choices you should style:**

Enable data labels: labels will show on bar graph

Label position: Above, Center, Below

Label orientation: Vertical, Horizontal

Font family: Choose font family for the label

Font size: Choose font size for the label

Font format : Bold, Italic

Color: Color your label

#### Horizontal bar chart

Horizontal bar chart is like bar chart, but it rotates to the horizontal style. You can style horizontal like style bar chart.

Note

{% hint style="info" %}
Bottom axis of horizontal bar chart is the left axis of bar chart

Left axis of horizontal bar chart is the bottom axis of bar chart
{% endhint %}

#### Mixed chart&#x20;

Line style

* Line weight: the visual lightness, darkness, or heaviness of a line within a drawing from 0 to 14
* Curve: Smooth, Straight, Stepline
* Area: toggle to enable

Bar style

* Column width: Extremely narrow, narrow, Default, Wide&#x20;
* Data label: See style a bar chart

Y axis

Reverse: reverse y axis to the opposite

Show value: Show or hide y axis value

#### Card chart

Mostly card chart are text and number, so, there are box and title options we can style

#### Table

Click the header section or Click “Data” in the toolbar Below are some options you can see to style your Data

From the left to the right, let’s discover

Select Column: Choose column to style. You can choose all columns

Font: Change the font of your data&#x20;

Fontsize: Change the size of your data&#x20;

Bold: Bold your data&#x20;

Italic: Format your data with italic side&#x20;

Text Color: Color your data&#x20;

Fill color: Fill color to your data area&#x20;

Text alignment: Align your data to the left, central, right&#x20;

#### Bubble chart

Size: pull to choose the size of node

**For data label, there are many choices you should style:**

Enable data labels: labels will show on bar graph

Label position: Above, Center, Below

Label orientation: Vertical, Horizontal

Font family: Choose font family for the label

Font size: Choose font size for the label

Font format : Bold, Italic

Color: Color your label

#### Scatter chart

Size: pull to choose the size of node

**For data label, there are many choices you should style:**

Enable data labels: labels will show on bar graph

Label position: Above, Center, Below

Label orientation: Vertical, Horizontal

Font family: Choose font family for the label

Font size: Choose font size for the label

Font format : Bold, Italic

Color: Color your label

#### Sankey Diagram&#x20;

**Nodes**

Aligment: Align nodes to the left, center, right or justify

Sort: Auto, Acsending, Descending, Input

Thickness: Adjust the thickness for nodes

Spacing: Identify the space beetween the source and the target

Border radius: Set for the nodes

**Links**

Enable gradient: enable to show gradient, unenable to unshow

Link contract: Adjust the size of link contract

**Format**

Unit: choose the unit for the value:

* Digital storage: B, KB, MB, GB, TB. For example: 1MB = 1024B
* Digital storage 10 base: B, KB, MB, GB, TB. For example: 1MB = 1000B
* Metric length: Mm, cm, dm, m, dam, hm, km
* Percentage: %
* Time: Microseconds, milliseconds, seconds, minutes, hours
* Other

**For data label, there are many choices you should style:**

Enable data labels: labels will show on bar graph

Label position: Above, Center, Below

Label orientation: Vertical, Horizontal

Font family: Choose font family for the label

Font size: Choose font size for the label

Font format : Bold, Italic

Color: Color your label

#### Map chart

Color: Choose the range of color topresent in the map

Border: Choose to set the border weight for area border

Unit type:

* Digital storage: B, KB, MB, GB, TB. For example: 1MB = 1024B
* Digital storage 10 base: B, KB, MB, GB, TB. For example: 1MB = 1000B
* Metric length: Mm, cm, dm, m, dam, hm, km
* Percentage: %
* Time: Microseconds, milliseconds, seconds, minutes, hours
* Other: Choose the unit for the value

### **X axis**&#x20;

{% hint style="info" %}
X axis is applicable for bar chart, horizontal bar chart, line chart, mixed chart, bubble chart, scatter chart
{% endhint %}

**Show value:** Click to show x axis, Hide to disappear x axis

**X scale:** scale the x axis

* Datetime: show time series in x axis. You can custom the date time format in “x tooltip format” field
* Category: show a dimension in x axis
* Numeric: order by number

**Reverse:** change the data’s x axis to the opposite

**Dimension position:** Horizontal, Incline, Vertical&#x20;

<figure><img src="https://1648695648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FygZlXb1uCVgursV03Kgn%2Fuploads%2F1qoVXd3xp1q1OSpzGB7Q%2Fx-axis.gif?alt=media&#x26;token=3bd8c7ca-a717-4564-ac77-3ebb31f79bd2" alt=""><figcaption></figcaption></figure>

### Y axis&#x20;

{% hint style="info" %}
Y axis is applicable for bar chart, horizontal bar chart, line chart, mixed chart, bubble chart, scatter chart
{% endhint %}

**Show value:** Click to show left axis, Hide to disappear left axis

**Min/max value:** Min y axis value & Max y axis value Min & max value can be a number or math which is used to set max or min value for y axis

* max(a, b, c,...): to get max value
* min(a, b, c,...): to get min value

**Reverse:** change the data’s y axis to the opposite

<figure><img src="https://1648695648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FygZlXb1uCVgursV03Kgn%2Fuploads%2FgySB7nb7j4P6I2itZ3T1%2Fy-axis.gif?alt=media&#x26;token=76b8ddc6-3785-4711-b6a4-f1d8ec8e80ca" alt=""><figcaption></figcaption></figure>

### **Toolbar**

**Show toolbar:** You can see the toolbar shown on the right, click to download chart as file svg, png, csv

**Hide toolbar:** Toolbar will disappear in your chart

**Toolbar Position:** Position the toolbar within a chart

<figure><img src="https://1648695648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FygZlXb1uCVgursV03Kgn%2Fuploads%2FhF5pQ1uc2cwgecElx9B4%2Ftoolbar.gif?alt=media&#x26;token=382404a6-c835-492f-af70-a08f544e16ad" alt=""><figcaption></figcaption></figure>

###

&#x20;

###