--- aliases: - ../features/panels/graph/ - ../panels/visualizations/ - ../panels/visualizations/graph-panel/ - ../reference/graph/ - ../visualizations/ - ../visualizations/graph-panel/ labels: products: - cloud - enterprise - oss title: Visualizations description: Apply visualizations to your data weight: 10 refs: news: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/news/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/news/ stat: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/stat/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/stat/ node-graph: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/node-graph/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/node-graph/ trend: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/trend/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/trend/ time-series: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/time-series/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/time-series/ pie-chart: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/pie-chart/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/pie-chart/ annotations-list: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/annotations/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/annotations/ canvas: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/canvas/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana//panels-visualizations/visualizations/canvas/ candlestick: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/candlestick/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/candlestick/ bar-gauge: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/bar-gauge/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/bar-gauge/ xy-chart: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/xy-chart/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/xy-chart/ geomap: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/geomap/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana//panels-visualizations/visualizations/geomap/ flame-graph: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/flame-graph/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/flame-graph/ bar-chart: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/bar-chart/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/bar-chart/ table: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/table/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/table/ histogram: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/histogram/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/histogram/ heatmap: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/heatmap/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/heatmap/ - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/heatmap/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/heatmap/ datagrid: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/datagrid/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/datagrid/ status-history: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/status-history/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/status-history/ gauge: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/gauge/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/gauge/ logs: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/logs/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/logs/ dashboard-list: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/dashboard-list/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/dashboard-list/ alert-list: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/alert-list/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/alert-list/ traces: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/traces/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/traces/ text: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/text/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/text/ state-timeline: - pattern: /docs/grafana/ destination: /docs/grafana//panels-visualizations/visualizations/state-timeline/ - pattern: /docs/grafana-cloud/ destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/state-timeline/ --- # Visualizations Grafana offers a variety of visualizations to support different use cases. This section of the documentation highlights the built-in visualizations, their options and typical usage. {{< youtube id="JwF6FgeotaU" >}} {{% admonition type="note" %}} If you are unsure which visualization to pick, Grafana can provide visualization suggestions based on the panel query. When you select a visualization, Grafana will show a preview with that visualization applied. {{< /admonition >}} - Graphs & charts - [Time series](ref:time-series) is the default and main graph visualization. Alerts are supported in this panel. - [State timeline](ref:state-timeline) for state changes over time. - [Status history](ref:status-history) for periodic state over time. - [Bar chart](ref:bar-chart) shows any categorical data. - [Histogram](ref:histogram) calculates and shows value distribution in a bar chart. - [Heatmap](ref:heatmap) visualizes data in two dimensions, used typically for the magnitude of a phenomenon. - [Pie chart](ref:pie-chart) is typically used where proportionality is important. - [Candlestick](ref:candlestick) is typically for financial data where the focus is price/data movement. - [Gauge](ref:gauge) is the traditional rounded visual showing how far a single metric is from a threshold. - [Trend](ref:trend) for datasets that have a sequential, numeric x that is not time. - [XY chart](ref:xy-chart) provides a way to visualize arbitrary x and y values in a graph. - Stats & numbers - [Stat](ref:stat) for big stats and optional sparkline. - [Bar gauge](ref:bar-gauge) is a horizontal or vertical bar gauge. - Misc - [Table](ref:table) is the main and only table visualization. - [Logs](ref:logs) is the main visualization for logs. - [Node graph](ref:node-graph) for directed graphs or networks. - [Traces](ref:traces) is the main visualization for traces. - [Flame graph](ref:flame-graph) is the main visualization for profiling. - [Canvas](ref:canvas) allows you to explicitly place elements within static and dynamic layouts. - [Geomap](ref:geomap) helps you visualize geospatial data. - [Datagrid](ref:datagrid) allows you to create and manipulate data, and act as data source for other panels. - Widgets - [Dashboard list](ref:dashboard-list) can list dashboards. - [Alert list](ref:alert-list) can list alerts. - [Annotations list](ref:annotations-list) can list available annotations. - [Text](ref:text) can show markdown and html. - [News](ref:news) can show RSS feeds. The following video shows you how to create gauge, time series line graph, stats, logs, and node graph visualizations: {{< youtube id="yNRnLyVntUw" >}} ## Get more You can add more visualization types by installing [panel plugins](https://grafana.com/grafana/plugins/?type=panel). ## Examples Below you can find some good examples for how all the visualizations in Grafana can be configured. You can also explore [play.grafana.org](https://play.grafana.org) which has a large set of demo dashboards that showcase all the different visualizations. ### Graphs For time based line, area and bar charts we recommend the default [time series](ref:time-series) visualization. [This public demo dashboard](https://play.grafana.org/d/000000016/1-time-series-graphs?orgId=1) contains many different examples for how this visualization can be configured and styled. {{< figure src="/static/img/docs/time-series-panel/time_series_small_example.png" max-width="700px" caption="Time series" >}} For categorical data use a [bar chart](ref:bar-chart). {{< figure src="/static/img/docs/bar-chart-panel/barchart_small_example.png" max-width="700px" caption="Bar chart" >}} ### Big numbers & stats A [stat](ref:stat) shows one large stat value with an optional graph sparkline. You can control the background or value color using thresholds or color scales. {{< figure src="/static/img/docs/v66/stat_panel_dark3.png" max-width="1025px" caption="Stat" >}} ### Gauge If you want to present a value as it relates to a min and max value you have two options. First a standard radial [gauge](ref:gauge) shown below. {{< figure src="/static/img/docs/v66/gauge_panel_cover.png" max-width="700px" alt="A gauge visualization" >}} Secondly Grafana also has a horizontal or vertical [bar gauge](ref:bar-gauge) with three different distinct display modes. {{< figure src="/static/img/docs/v66/bar_gauge_lcd.png" max-width="700px" alt="A bar gauge visualization" >}} ### Table To show data in a table layout, use a [table](ref:table). {{< figure src="/static/img/docs/tables/table_visualization.png" max-width="700px" lightbox="true" caption="Table visualization" >}} ### Pie chart To display reduced series, or values in a series, from one or more queries, as they relate to each other, use a [pie chart](ref:pie-chart). {{< figure src="/static/img/docs/pie-chart-panel/pie-chart-example.png" max-width="700px" lightbox="true" caption="Pie chart" >}} ### Heatmaps To show value distribution over, time use a [heatmap](ref:heatmap). {{< figure src="/static/img/docs/v43/heatmap_panel_cover.jpg" max-width="1000px" lightbox="true" caption="Heatmap" >}} ### State timeline A state timeline shows discrete state changes over time. When used with time series, the thresholds are used to turn the numerical values into discrete state regions. {{< figure src="/static/img/docs/v8/state_timeline_strings.png" max-width="700px" caption="State timeline with string states" >}}