CSS Styling

yFiles for HTML offers CSS classes for certain default visual elements that enable styling of the view with CSS stylesheets.

The default visuals can also be entirely replaced by custom visuals in cases where the provided CSS classes are not sufficient. For details, see the respective articles in Styling Selection, Focus, and Highlight and Resource Keys.

Default Look and Feel

The library comes with a default look and feel for elements like tooltips, the label editor input box, scrollbars, handles, etc. This styling can be overridden or disabled with custom CSS.

During instantiation of a GraphComponent, a <style> tag with the default look and feel is added to the DOM, if necessary. These styles can be overwritten with a more specific CSS selector for the respective default style.

For example, see the yfiles.css file which is provided with the library files of yFiles for HTML. It provides CSS rules that are more specific than the programmatically added styling. Thus, these rules can be copied and overwritten to provide a different look and feel.

The yfiles.css file, that is provided with the library, is optional. If it is loaded explicitly, no <style> tag is added to the DOM during instantiation of a GraphComponent.

The CSS Styling demo illustrates how to create a dark theme for the diagram via CSS.

In addition to the styling that is added automatically, there are more options to adjust the styling of the component with CSS, which is described in the following sections.

Styling of Scrollbars

The scrollbars of the yFiles GraphComponent are styled with a default look and feel as explained in the section above. The defaults may be overwritten to get customized scrollbar styling.

Both the vertical and the horizontal scrollbar have the class yfiles-scrollbar and are further specialized via classes yfiles-scrollbar-vertical and yfiles-scrollbar-horizontal. The following are the important building blocks of a scrollbar:

• Two buttons (e.g. up and down) that have classes like, for example, .yfiles-button.yfiles-button-up
• A scrollbar range div with class .yfiles-scrollbar-range (and further specialized with .yfiles-scrollbar-range-vertical or .yfiles-scrollbar-range-horizontal)
• The content of the scrollbar range, holding the slider that has class .yfiles-scrollbar-slider.

To see all scrollbar-related CSS rules, please see the yfiles.css file provided with the library. Below you find an example that illustrates how to change the width and color of the vertical scrollbar. The CSS Styling demo provides a more complex example of how to customize the scrollbars.

To make the vertical scrollbar 30 pixels wide, the following CSS rules can be used:

.yfiles-canvascomponent .yfiles-scrollbar.yfiles-scrollbar-vertical,
.yfiles-canvascomponent .yfiles-scrollbar.yfiles-scrollbar-vertical div,
.yfiles-canvascomponent
  .yfiles-scrollbar-range.yfiles-scrollbar-range-vertical
  .yfiles-scrollbar-slider,
.yfiles-canvascomponent .yfiles-scrollbar .yfiles-scrollbar-range.yfiles-scrollbar-range-vertical {
  width: 30px;
}

.yfiles-canvascomponent .yfiles-scrollbar .yfiles-scrollbar-range.yfiles-scrollbar-range-vertical {
  top: 30px;
  bottom: 30px;
}

.yfiles-canvascomponent .yfiles-scrollbar-vertical .yfiles-button {
  width: 30px;
  height: 30px;
}

To change the color of the slider of the vertical scrollbar to a dark blue, use the rule below:

.yfiles-canvascomponent .yfiles-scrollbar-vertical .yfiles-scrollbar-slider-content {
  background-color: darkblue;
  opacity: 1;
}

Styling of Handles

The default visualizations for handles consist of two parts: The elements in the defs section of the main SVG for each handle type, which will be referred to as handle templates, and use elements that reference the handle templates in the defs. Both can be styled separately. Styling the handle templates in the defs will affect all handle instances with this type. Styling a use reference will only affect this instance.

The default handle templates in the defs have the class yfiles-handle-template. Additionally, there are specific classes for the various handle resource keys.

The use elements that reference the handle templates and act as the handles visible on the screen have the class yfiles-handle. Additionally, they have one or two classes for their location offset.

Changing style properties like fill, stroke, etc. that apply for all handles of a type should usually be done on the handle template.

// makes resize handles blue
.yfiles-handle-resize-template {
  fill: blue;
}

Using SVG currentColor, it is possible to set different colors for individual handles.

// use currentColor for resize handles
.yfiles-handle-resize-template {
  fill: currentColor;
}
// makes all handles that use currentColor blue
.yfiles-handle {
  color: blue;
}
// makes north-east handle red
.yfiles-handle-north.yfiles-handle-east {
  color: red;
}

Styling of Port Candidates

Similar to the Styling of Handles, the default visualization for port candidates provides the yfiles-port-candidate CSS class with the use element, while the elements in the defs section have yfiles-port-candidate-template class.

Depending on the actual port candidate, the classes yfiles-valid, yfiles-invalid, yfiles-focused or yfiles-non-focused may be set. See the following table for a complete listing:

Nested within the port candidate template CSS classes is the SVG visualization, that provides the following CSS classes for its visualization:

• yfiles-outer-rect: The bigger outer rect element which is white in the example image below.
• yfiles-inner-rect: The smaller, inner rect element (green in the example image) that superimposes the outer rect element.
• yfiles-corner-path: The four path elements that visualize the corners of the port candidate (black in the example image). These elements are superimposed on the outer rect.

The following snippet shows how to change the appearance of valid port candidates to a green rectangle with white corner elements:

.yfiles-port-candidate-template.yfiles-valid .yfiles-outer-rect {
  fill: #76d275;
}
.yfiles-port-candidate-template.yfiles-valid .yfiles-inner-rect {
  opacity: 0;
}
.yfiles-port-candidate-template.yfiles-valid .yfiles-corner-path {
  stroke: #fff;
}

Styling of Marquee Rectangle

The marquee rectangle can be styled with the yfiles-marquee-rect-template CSS class, e.g. a gray marquee rect may be created with the following rules:

.yfiles-marquee-rect-template {
  fill: lightgray;
  stroke: darkgray;
}

Styling of Lasso Selection

The lasso marquee of the LassoSelectionInputMode may be styled with the yfiles-lasso-path CSS class.

Additionally, the following CSS classes are provided to further specific the styling of the different lasso marquee templates:

The following example shows how to style the lasso marquee gray:

.yfiles-lasso-template {
  fill: lightgray;
  stroke: darkgrey;
}

Styling of Overview Viewport Rectangle

The viewport rectangle of the OverviewInputMode provides the yfiles-overview-viewport-template CSS class with which the visual appearance of the SVG rect element can be changed:

.yfiles-overview-viewport-template {
  fill: lightgray;
  stroke: darkgray;
}

Styling of Table Indicators

The table provides indicators for several interactive gestures (for more information see Tables). The following table lists the CSS classes that are provided for these indicators:

The highlight indicator consists of several SVG rect elements (see The Highlight Template) while the other indicators consist of a single SVG rect element.

Therefore, to change all indicators to a gray color, the following CSS rules could be used:

.yfiles-stripe-highlight-template {
  stroke: #cdcdcd;
}
.yfiles-stripe-resize-template,
.yfiles-stripe-selection-template,
.yfiles-stripe-drag-template {
  stroke: #cdcdcd;
  fill: rgba(0,0,0,0.2)
}

Styling of Snap Lines

Snap Lines can either be styled by modifying the SNAP_LINE_STROKE_KEY resource (see Customizing Snapping) or by specifying one or more of the following CSS rules.

Each snap line visual provides the yfiles-snap-line CSS class.

The visualization is further separated in the following snap line types, which provide a specific CSS class:

Grid snapping is separated in snapping at grid lines, which is covered by the following type

Additionally, the snapping to grid points, is visualized by a small cross which provides the yfiles-snap-to-grid CSS class.

For example, changing the color of each snap line type, can be done by

.yfiles-snap-line {
  stroke: darkgray;
}

Styling of the Grid Visual

The SVG render mode of the GridVisualCreator provides the following CSS classes to conveniently adjust the styling of the grid:

Styling of Selection, Focus and Highlight Indicators

For information about styling the selection, focus and highlight indicators, please see Using CSS Styling for the Indicators.

Styling of the Label Position Suggestions

During label dragging, the possible positions provided by the label model are visualized with a rectangular indicator. This indicator can be styled with the following CSS classes:

For a blueish position highlight, the following CSS rules could be used:

.yfiles-label-position-highlight-template,
.yfiles-label-position-candidate-template {
  stroke: #00BFFF;
  opacity: 0.5;
}

Styling of the Label Input Element

For information about styling the label input element, please see CSS Transition or Animation for the Input Element.

Styling of the Tooltip Element

For information about styling the tooltip element, please see Styling of the Tooltip Element.