# Visualization
# Expression browser
The expression browser is available at `/graph` on the Prometheus server, allowing you
to enter any expression and see its result either in a table or graphed over time.
This is primarily useful for ad-hoc queries and debugging. For graphs, use
[Grafana](/docs/visualization/grafana/) or [Console templates](/docs/visualization/consoles/).
# Console templates
CAUTION: Starting with Prometheus 3.0, console templates and libraries are no longer bundled with Prometheus. If you wish to use console templates, you must provide your own templates and libraries by specifying the `--web.console.templates` and `--web.console.libraries` command-line flags. This documentation page is maintained for historical reference and to demonstrate the capabilities of console templates. Please be aware that any referenced console libraries from the Prometheus 2.x branch are no longer maintained and may contain known security vulnerabilities (CVEs).
Console templates allow for creation of arbitrary consoles using the [Go
templating language](http://golang.org/pkg/text/template/). These are served
from the Prometheus server.
Console templates are the most powerful way to create templates that can be
easily managed in source control. There is a learning curve though, so users new
to this style of monitoring should try out
[Grafana](/docs/visualization/grafana/) first.
## Getting started
Prometheus comes with an example set of consoles to get you going. These can be
found at `/consoles/index.html.example` on a running Prometheus and will
display Node Exporter consoles if Prometheus is scraping Node Exporters with a
`job="node"` label.
The example consoles have 5 parts:
1. A navigation bar on top
1. A menu on the left
1. Time controls on the bottom
1. The main content in the center, usually graphs
1. A table on the right
The navigation bar is for links to other systems, such as other Prometheis
[1](/docs/introduction/faq/#what-is-the-plural-of-prometheus),
documentation, and whatever else makes sense to you. The menu is for navigation
inside the same Prometheus server, which is very useful to be able to quickly
open a console in another tab to correlate information. Both are configured in
`console_libraries/menu.lib`.
The time controls allow changing of the duration and range of the graphs.
Console URLs can be shared and will show the same graphs for others.
The main content is usually graphs. There is a configurable JavaScript graphing
library provided that will handle requesting data from Prometheus, and rendering
it via [Rickshaw](https://shutterstock.github.io/rickshaw/).
Finally, the table on the right can be used to display statistics in a more
compact form than graphs.
## Example Console
This is a basic console. It shows the number of tasks, how many of them are up,
the average CPU usage, and the average memory usage in the right-hand-side
table. The main content has a queries-per-second graph.
```
{{template "head" .}}
{{template "prom_right_table_head"}}
| MyJob |
{{ template "prom_query_drilldown" (args "sum(up{job='myjob'})") }}
/ {{ template "prom_query_drilldown" (args "count(up{job='myjob'})") }}
|
| CPU |
{{ template "prom_query_drilldown" (args
"avg by(job)(rate(process_cpu_seconds_total{job='myjob'}[5m]))"
"s/s" "humanizeNoSmallPrefix") }}
|
| Memory |
{{ template "prom_query_drilldown" (args
"avg by(job)(process_resident_memory_bytes{job='myjob'})"
"B" "humanize1024") }}
|
{{template "prom_right_table_tail"}}
{{template "prom_content_head" .}}
MyJob
Queries
{{template "prom_content_tail" .}}
{{template "tail"}}
```
The `prom_right_table_head` and `prom_right_table_tail` templates contain the
right-hand-side table. This is optional.
`prom_query_drilldown` is a template that will evaluate the expression passed to it, format it,
and link to the expression in the [expression browser](/docs/visualization/browser/). The first
argument is the expression. The second argument is the unit to use. The third
argument is how to format the output. Only the first argument is required.
Valid output formats for the third argument to `prom_query_drilldown`:
* Not specified: Default Go display output.
* `humanize`: Display the result using [metric prefixes](http://en.wikipedia.org/wiki/Metric_prefix).
* `humanizeNoSmallPrefix`: For absolute values greater than 1, display the
result using [metric prefixes](http://en.wikipedia.org/wiki/Metric_prefix). For
absolute values less than 1, display 3 significant digits. This is useful
to avoid units such as milliqueries per second that can be produced by
`humanize`.
* `humanize1024`: Display the humanized result using a base of 1024 rather than 1000.
This is usually used with `B` as the second argument to produce units such as `KiB` and `MiB`.
* `printf.3g`: Display 3 significant digits.
Custom formats can be defined. See
[prom.lib](https://github.com/prometheus/prometheus/blob/release-2.55/console_libraries/prom.lib) for examples.
## Graph Library
The graph library is invoked as:
```
```
The `head` template loads the required Javascript and CSS.
Parameters to the graph library:
| Name | Description
| ------------- | -------------
| expr | Required. Expression to graph. Can be a list.
| node | Required. DOM node to render into.
| duration | Optional. Duration of the graph. Defaults to 1 hour.
| endTime | Optional. Unixtime the graph ends at. Defaults to now.
| width | Optional. Width of the graph, excluding titles. Defaults to auto-detection.
| height | Optional. Height of the graph, excluding titles and legends. Defaults to 200 pixels.
| min | Optional. Minimum x-axis value. Defaults to lowest data value.
| max | Optional. Maximum y-axis value. Defaults to highest data value.
| renderer | Optional. Type of graph. Options are `line` and `area` (stacked graph). Defaults to `line`.
| name | Optional. Title of plots in legend and hover detail. If passed a string, `[[ label ]]` will be substituted with the label value. If passed a function, it will be passed a map of labels and should return the name as a string. Can be a list.
| xTitle | Optional. Title of the x-axis. Defaults to `Time`.
| yUnits | Optional. Units of the y-axis. Defaults to empty.
| yTitle | Optional. Title of the y-axis. Defaults to empty.
| yAxisFormatter | Optional. Number formatter for the y-axis. Defaults to `PromConsole.NumberFormatter.humanize`.
| yHoverFormatter | Optional. Number formatter for the hover detail. Defaults to `PromConsole.NumberFormatter.humanizeExact`.
| colorScheme | Optional. Color scheme to be used by the plots. Can be either a list of hex color codes or one of the [color scheme names](https://github.com/shutterstock/rickshaw/blob/master/src/js/Rickshaw.Fixtures.Color.js) supported by Rickshaw. Defaults to `'colorwheel'`.
If both `expr` and `name` are lists, they must be of the same length. The name
will be applied to the plots for the corresponding expression.
Valid options for the `yAxisFormatter` and `yHoverFormatter`:
* `PromConsole.NumberFormatter.humanize`: Format using [metric prefixes](http://en.wikipedia.org/wiki/Metric_prefix).
* `PromConsole.NumberFormatter.humanizeNoSmallPrefix`: For absolute values
greater than 1, format using [metric prefixes](http://en.wikipedia.org/wiki/Metric_prefix).
For absolute values less than 1, format with 3 significant digits. This is
useful to avoid units such as milliqueries per second that can be produced by
`PromConsole.NumberFormatter.humanize`.
* `PromConsole.NumberFormatter.humanize1024`: Format the humanized result using a base of 1024 rather than 1000.
# Grafana support for Prometheus
[Grafana](http://grafana.com/) is an open-source analytics and visualization platform used to monitor and analyze metrics from various data
sources. It allows users to create, explore, and share interactive dashboards, supporting integrations with databases
like Prometheus, InfluxDB, Elasticsearch, and more. Grafana is widely used for observability, providing alerting, plugin
extensibility, and a flexible query editor for real-time data visualization.
Note: The Grafana data source for Prometheus is included since Grafana 2.5.0 (2015-10-28).
The following shows an example Grafana dashboard which queries Prometheus for data:
[](https://docs.cocobook.com/uploads/images/gallery/2026-11/img-974542379ff9.png)
## Installing
To install Grafana see the [official Grafana
documentation](https://grafana.com/grafana/download/).
## Using
By default, Grafana will be listening on
[http://localhost:3000](http://localhost:3000). The default login is "admin" /
"admin".
### Creating a Prometheus data source
To create a Prometheus data source in Grafana:
1. Click on the "cogwheel" in the sidebar to open the Configuration menu.
2. Click on "Data Sources".
3. Click on "Add data source".
4. Select "Prometheus" as the type.
5. Set the appropriate Prometheus server URL (for example, `http://localhost:9090/`)
6. Adjust other data source settings as desired (for example, choosing the right Access method).
7. Click "Save & Test" to save the new data source.
The following shows an example data source configuration:
[](https://docs.cocobook.com/uploads/images/gallery/2026-11/img-77b730a6e948.png)
### Creating a Prometheus graph
Follow the standard way of adding a new Grafana graph. Then:
1. Click the graph title, then click "Edit".
2. Under the "Metrics" tab, select your Prometheus data source (bottom right).
3. Enter any Prometheus expression into the "Query" field, while using the
"Metric" field to lookup metrics via autocompletion.
4. To format the legend names of time series, use the "Legend format" input. For
example, to show only the `method` and `status` labels of a returned query
result, separated by a dash, you could use the legend format string
`{{method}} - {{status}}`.
5. Tune other graph settings until you have a working graph.
The following shows an example Prometheus graph configuration:
[](https://docs.cocobook.com/uploads/images/gallery/2026-11/img-5e1944c9a671.png)
In Grafana 7.2 and later, the `$__rate_interval` variable is
[recommended](https://grafana.com/docs/grafana/latest/datasources/prometheus/#using-__rate_interval)
for use in the `rate`and `increase` functions.
### Importing pre-built dashboards from Grafana.com
Grafana.com maintains [a collection of shared dashboards](https://grafana.com/grafana/dashboards/)
which can be downloaded and used with standalone instances of Grafana. Use
the Grafana.com "Filter" option to browse dashboards for the "Prometheus"
data source only.
You must currently manually edit the downloaded JSON files and correct the
`datasource:` entries to reflect the Grafana data source name which you
chose for your Prometheus server. Use the "Dashboards" → "Home" → "Import"
option to import the edited dashboard file into your Grafana install.
# Perses support for Prometheus
[Perses](https://perses.dev) is an open-source dashboard and visualization platform designed for observability, with
native support for Prometheus as a data source.
It enables users to create, manage, and share dashboards for monitoring metrics and visualizing data.
Perses aims to provide a simple, flexible, and extensible alternative to other dashboarding tools, focusing on ease of
use, community-driven development, GitOps capabilities and dashboard as code approach.
Here is an example of a Perses dashboard querying Prometheus for data:
[](https://docs.cocobook.com/uploads/images/gallery/2026-11/img-3587661777ba.png)
## Installing
To install Perses, see the official [Perses documentation](https://perses.dev/perses/docs/installation/in-a-container/).
## Using
By default, Perses will be listening on port `8080`. You can access the web UI at `http://localhost:8080`. There is no
login by default.
### Creating a Prometheus data source
To learn about how to set up a data source in Perses, please refer
to [Perses documentation](https://perses.dev/perses/docs/concepts/datasource/).
Once this connection to your Prometheus instance is configured, you are able to query it from the Dashboard and Explore
views.
### Importing pre-built dashboards
Perses is providing a set of pre-built dashboards that you can import into your instance. These dashboards are
maintained by the community and can be found in
the [Perses dashboard repository](https://github.com/perses/community-dashboards)