Plot Settings and Appearance Reference
Reference for all plot settings. Use the left sidebar major links to switch doc pages and the "On This Page" links to jump to sections below. The section links are in the right sidebar.
Adjust the plot appearance #
The settings sidebar located at the right side of this webapp lets you fine-tune the appearance of the plot. Options are grouped into collapsible panels so you can focus on one aspect at a time (figure layout, titles, axes, grid, and so on).
Figure #
In the Figure panel you control the overall size and layout of the plot.
Animate: enable this option to animate transitions when the figure is updated.
Width and height: customize the size of the figure by setting the width and height in pixels. The initial values are chosen automatically based on your screen size and shown as placeholders.
Margin
Adjust the left, top, right, and bottom padding around the plot. This field accepts numbers and percentages. The unit for number values is pixels.
Border
Color: customize the border color using the color picker. The appearance of the color picker is defined by the browser. In Firefox, to select a custom color you need to click on the “+” icon.
Width: customize the border line width by modifying this field. The units are pixels.
Opacity: set the opacity of border to any value between 0 and 1, where 0 means fully transparent and 1 means fully opaque.
Font family: set the font family for the figure in this field. The selected font is applied to all text elements in the figure. You can use any font installed on your computer. If the font was not applied after selection, click on the Plot button one more time. When exporting the figure as an SVG, the font will only display correctly on other machines if that font is also installed there. To make the text appear consistently on any computer, you should convert the text to curves (outlines) using tools such as Adobe Illustrator or Inkscape.
Title #
The Title panel lets you add and style a main title for the band-structure figure.
Plot Title: set the plot title using this box. You can use LaTeX formating for superscript and subcript using "_", "^", and "{}". You can also use greek alphabet using LaTeX formating (e.g. \alpha)
Size: set the font size of the plot title using this box.
Top and Left offset: customize the title position by modifying the top and left offset values.
Color: customize the title color using the color picker. The appearance of the color picker is defined by the browser. In Firefox, to select a custom color you need to click on the “+” icon.
Weight: customize the font weight using this dropdown. The options correspond to font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, and font-black, which map to 100, 200, 300, 400, 500, 600, 700, 800, and 900, respectively. Most fonts only provide a subset of these weights (typically normal and bold). You can see examples of fonts that support all weights in Google Fonts.
Style: customize the font style as normal or italic.
Limits #
In the Limits panel you can restrict the visible region of the plot.
X min and X max: adjust the x-axis interval shown in the plot by setting the minimum and maximum in these fields. For electronic band-structure plots, you can provide the limits as integers that count segments of the k-path. For example, if the path is Γ–X–W–K–Γ–L–U and you select 1 and 4 for X min and X max, respectively, the plot will display the segment X–W–K–Γ.
Y min and Y max: adjust the y-axis interval shown in the plot by setting the minimum and maximum energy values in these fields.
Each axis also has its own zoom slider that can be adjusted using the mouse.
The edges of the zoom slider can be dragged to expand or contract the zoom window. You can also click and drag the center of the slider to move the fixed interval to a different region of the axis.
Lines #
The Lines panel controls the appearance of the plot lines for each spin channel. If a spin polarized simulation is uploaded, a second set of settings will be automatically added.
Color: customize the line color using the color picker. The appearance of the color picker is defined by the browser. In Firefox, to select a custom color you need to click on the “+” icon.
Width: customize the plot lines line width by modifying this field. The units are pixels.
Style: choose the line style for plot line using this dropdown. Available options are: solid, dashed, and dotted.
Fermi Level #
The Fermi level panel manages the horizontal line that marks the Fermi energy in the plot. You can enable or disable the Show fermi checkbox.
Color: customize the fermi line color using the color picker. The appearance of the color picker is defined by the browser. In Firefox, to select a custom color you need to click on the “+” icon.
Width: customize the fermi lines line width by modifying this field. The units are pixels.
Style: choose the line style for fermi line using this dropdown. Available options are: solid, dashed, and dotted.
x-Axis #
The X Axis panel lets you configure the axis label and tick marks. You can toggle the label visibility using the Show label checkbox.
Position: choose where the axis label is placed relative to the chart. The available positions for x are top or bottom. These positions are defined with respect to the chart area.
Location: choose the label location along the axis at the selected position. The options are start, center, and end; in most cases, center is recommended.
Gap: set additional spacing between the axis label and the axis line.
X Axis Label: set the x axis label using this box. You can use LaTeX formating for superscript and subcript using "_", "^", and "{}". You can also use greek alphabet using LaTeX formating (e.g. \alpha)
Size: set the font size of the x axis label using this box.
Color: customize the x axis label color using the color picker. The appearance of the color picker is defined by the browser. In Firefox, to select a custom color you need to click on the “+” icon.
Weight: customize the font weight using this dropdown. The options correspond to font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, and font-black, which map to 100, 200, 300, 400, 500, 600, 700, 800, and 900, respectively. Most fonts only provide a subset of these weights (typically normal and bold). You can see examples of fonts that support all weights in Google Fonts.
Style: customize the font style as normal or italic.
Ticks
Direction: choose whether the x-axis ticks point inside or outside the plot area.
Minor: turn minor ticks on or off using the dropdown menu (Show or Hide).
Major
# Ticks: set the number of major ticks shown on the x axis. The default value is 10.
Length: set the length of the major ticks (in pixels).
Width: set the width of the major ticks (in pixels).
Minor
When minor ticks are enabled, the following options control the minor ticks. In electronic band-structure mode, custom x-axis rendering can override minor x-tick display.
# Split: set the number of minor ticks between two major ticks on the x axis.
Length: set the length of the minor ticks (in pixels).
Width: set the width of the minor ticks (in pixels).
y-Axis #
The Y Axis panel lets you configure the axis label and tick marks. You can toggle the label visibility using the Show label checkbox.
Position: choose where the axis label is placed relative to the chart. The available positions for y are left or right. These positions are defined with respect to the chart area.
Location: choose the label location along the axis at the selected position. The options are start, center, and end; in most cases, center is recommended.
Gap: set additional spacing between the axis label and the axis line.
Y Axis Label: set the y axis label using this box. You can use LaTeX formating for superscript and subcript using "_", "^", and "{}". You can also use greek alphabet using LaTeX formating (e.g. \alpha)
Size: set the font size of the y axis label using this box.
Color: customize the y axis label color using the color picker. The appearance of the color picker is defined by the browser. In Firefox, to select a custom color you need to click on the “+” icon.
Weight: customize the font weight using this dropdown. The options correspond to font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, and font-black, which map to 100, 200, 300, 400, 500, 600, 700, 800, and 900, respectively. Most fonts only provide a subset of these weights (typically normal and bold). You can see examples of fonts that support all weights in Google Fonts.
Style: customize the font style as normal or italic.
Ticks
Direction: choose whether the y-axis ticks point inside or outside the plot area.
Minor: turn minor ticks on or off using the dropdown menu (Show or Hide).
Major
# Ticks: set the number of major ticks shown on the y axis. The default value is 10.
Length: set the length of the major ticks (in pixels).
Width: set the width of the major ticks (in pixels).
Minor
When minor ticks are enabled, the following options control the minor ticks. In electronic band-structure mode, custom x-axis rendering can override minor x-tick display.
# Split: set the number of minor ticks between two major ticks on the y axis.
Length: set the length of the minor ticks (in pixels).
Width: set the width of the minor ticks (in pixels).
Legend #
The Legend panel controls the figure legends, including both the items and the text. If the simulation is spin polarized, a second set of legend settings is added to this panel. Use the Show legend checkbox to enable or disable the legend.
Loc X and Loc Y: adjust the position of the legend by modifying these two fields (in pixels).
Orientation: choose the orientation of the legend by selecting vertical or horizontal from this dropdown menu.
Length and Width: adjust the length and width of legend items (in pixels).
Font size: set the legend text size.
# Markers: set the number of marker symbols drawn in each legend icon.
Marker Size: set marker size used in legend icons.
Gap: set spacing between legend items.
Border
Activate or deactivate the legend border by toggling the Show border checkbox. When the legend is hidden, the border options are disabled.
Color: customize the legend border color using the color picker. The appearance of the color picker is defined by the browser. In Firefox, to select a custom color you need to click on the “+” icon.
Width: customize the legend border line width by modifying this field. The units are pixels.
Radius: control the corner radius of the legend border box. If set to zero, the box will have sharp corners.
Legend label: use this field to assign a label to each legend item.
Color: customize the legend label color using the color picker. The appearance of the color picker is defined by the browser. In Firefox, to select a custom color you need to click on the “+” icon.
Weight: customize the font weight using this dropdown. The options correspond to font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, and font-black, which map to 100, 200, 300, 400, 500, 600, 700, 800, and 900, respectively. Most fonts only provide a subset of these weights (typically normal and bold). You can see examples of fonts that support all weights in Google Fonts.
Style: customize the font style as normal or italic.
Color Bar #
The Color Bar panel controls the continuous color scale used for colormap-style filtered plots. It is organized into two groups: Bar for placement/size and Text for label formatting.
In ECharts, these controls map to the visualMap component. In this documentation, we use
the term Color Bar for user-facing clarity.
Show Color Bar: toggle the color bar visibility.
Bar
Loc. X and Loc. Y: set the color bar position (in pixels).
Orientation: choose whether the bar is horizontal or vertical.
Length, Width, and Gap: control the size of the bar and spacing behavior.
Text
Color: customize the color bar labels color using the color picker. The appearance of the color picker is defined by the browser. In Firefox, to select a custom color you need to click on the “+” icon.
Weight: customize the font weight using this dropdown. The options correspond to font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, and font-black, which map to 100, 200, 300, 400, 500, 600, 700, 800, and 900, respectively. Most fonts only provide a subset of these weights (typically normal and bold). You can see examples of fonts that support all weights in Google Fonts.
Style: customize the font style as normal or italic.
Font Size: set the label font size used by the color bar text.
Precision: set the number of decimal places shown for color bar values (non-negative integer).
Text Gap: controls spacing between the label text and the minimum value in the horizontal orientation. This setting is not applied in vertical orientation.
Grid #
The Grid panel controls the major and minor grid lines along each axis. For both x and y, you can toggle major and minor grids independently.
Color: customize the grid lines color using the color picker. The appearance of the color picker is defined by the browser. In Firefox, to select a custom color you need to click on the “+” icon.
Width: customize the grid lines line width by modifying this field. The units are pixels.
Opacity: set the opacity of grid lines to any value between 0 and 1, where 0 means fully transparent and 1 means fully opaque.