1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
---
title: "Customize the standard dashboard"
description: "Netdata's preconfigured dashboard offers many customization options, such as choosing when charts are updated, your preferred theme, and custom text to document processes, and more."
type: how-to
custom_edit_url: https://github.com/netdata/netdata/edit/master/docs/dashboard/customize.mdx
---
# Customize the standard dashboard
While the [Netdata dashboard](/docs/dashboard/how-dashboard-works.mdx) 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 
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](/docs/dashboard/dimensions-contexts-families.mdx#dimension) _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.
```javascript
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.
```bash
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](https://fontawesome.com/cheatsheet) to customize the icons that appear throughout the
dashboard.
Save the file, then navigate to your [Netdata config directory](/docs/configure/nodes.md) to edit `netdata.conf`. Add
the following line to the `[web]` section to tell Netdata where to find your custom configuration.
```conf
[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](/web/gui/custom/README.md) with HTML, CSS, and JavaScript.
### Further reading & related information
- Dashboard
- [How the dashboard works](/docs/dashboard/how-dashboard-works.mdx)
- [Interact with charts](/docs/dashboard/interact-charts.mdx)
- [Chart dimensions, contexts, and families](/docs/dashboard/dimensions-contexts-families.mdx)
- [Select timeframes to visualize](/docs/dashboard/visualization-date-and-time-controls.mdx)
- [Import, export, and print a snapshot](/docs/dashboard/import-export-print-snapshot.mdx)
- **[Customize the standard dashboard](/docs/dashboard/customize.mdx)**
|
