Customize the standard dashboard
While the Netdata dashboard comes preconfigured with hundreds of charts and thousands of metrics, you may want to alter your experience based on a particular use case or preferences.
#
Dashboard settingsTo change dashboard settings, click the on the settings icon in the top panel.
These settings only affect how the dashboard behaves in your browser. They take effect immediately and are permanently saved to browser local storage (except the refresh on focus / always option). Some settings are applied immediately, and others are only reflected after the dashboard is refreshed, which happens automatically.
Here are a few popular settings:
#
Change chart legend positionFind this setting under the Visual tab. By default, Netdata places the legend of dimensions below charts. Click this toggle to move the legend to the right of charts.
#
Change themeFind this setting under the Visual tab. Choose between Dark (the default) and White.
#
Customize the standard dashboardNetdata stores information about individual charts in the dashboard_info.js
file. This file includes section and
subsection headings, descriptions, colors, titles, tooltips, and other information for Netdata to render on the
dashboard.
One common use case for customizing the standard dashboard is adding internal "documentation" a section or specific chart that can then be read by anyone with access to that dashboard.
For example, here is how dashboard_info.js
defines the System Overview section.
If you want to customize this information, use the example dashboard_info_custom_example.js
as a starting point.
First, navigate to the web server's directory. If you're on a Linux system, this should be at /usr/share/netdata/web/
.
Copy the example file, then ensure that its permissions match the rest of the web server, which is netdata:netdata
by
default.
Edit the file with customizations to the title
, icon
, and info
fields. Replace the string after fas fa-
with any
icon from Font Awesome to customize the icons that appear throughout the
dashboard.
Save the file, then navigate to your Netdata config directory to edit netdata.conf
. Add
the following line to the [web]
section to tell Netdata where to find your custom configuration.
Reload your browser tab to see your custom configuration.
#
What's next?If you're keen on continuing to customize your Netdata experience, check out our docs on building new custom dashboards with HTML, CSS, and JavaScript.