Quick styling toolbar

Styling your chart easily and quickly with 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

Title

Style elements for Title

  • Font text

  • Font size

  • Text format (Bold, Italic)

  • Title color

Header

Apply for table chart

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

Fontsize: Change the size of your header

Bold: Bold your header

Italic: Format your header with italic side

Text Color: Color your header

Fill color: Fill color to your header area

Text Alignment: Align your header to the left, central, right

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

  • Legend text format (Bold, Italic)

  • Legend color

Graph

Bar chart

You can enable

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

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

Mixed chart

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

  • 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

Fontsize: Change the size of your data

Bold: Bold your data

Italic: Format your data with italic side

Text Color: Color your data

Fill color: Fill color to your data area

Text alignment: Align your data to the left, central, right

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

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

X axis is applicable for bar chart, horizontal bar chart, line chart, mixed chart, bubble chart, scatter chart

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

Y axis

Y axis is applicable for bar chart, horizontal bar chart, line chart, mixed chart, bubble chart, scatter chart

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

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

PreviousCustom chartsNextRight styling panel

Last updated