Skip to main content

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 settings#

To change dashboard settings, click the on the settings icon Import
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 position#

Find 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 theme#

Find this setting under the Visual tab. Choose between Dark (the default) and White.

Customize the standard dashboard#

Netdata 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.

netdataDashboard.menu = {
'system': {
title: 'System Overview',
icon: '<i class="fas fa-bookmark"></i>',
info: 'Overview of the key system metrics.'
},

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.

cd /usr/share/netdata/web/
sudo cp dashboard_info_custom_example.js your_dashboard_info_file.js
sudo chown netdata:netdata your_dashboard_info_file.js

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.

[web]
custom dashboard_info.js = your_dashboard_info_file.js

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.

Further reading & related information#

Reach out

If you need help after reading this doc, search our community forum for an answer. There's a good chance someone else has already found a solution to the same issue.

Documentation

Community