What You'll Learn
Display multiple variables in a single chart
Compare actual values with set points
Customize line styles (colours, dashed lines, thickness)
Configure legends with statistical calculations
A dashboard with at least one time series panel
Time series charts are the most common visualization in manufacturing dashboards. They show how values change over time, making them perfect for:
Monitoring process parameters (temperature, pressure, speed)
Comparing actual values to set points
Identifying trends and anomalies
Analysing production patterns
In this tutorial, you'll learn advanced techniques to make your time series panels more informative and visually clear.
Adding Multiple Variables
There are two ways to display multiple variables in a single chart:
Method 1: Multiple Variables in One Query
This is the simplest approach when variables are from the same machine.
Edit panel and select variables
Edit your time series panel (click panel title → Edit)
In the query editor, click the Variables field
Select additional variables from the list
All selected variables will appear as separate lines on the chart
Best for: Comparing related measurements from the same machine (e.g., multiple temperature sensors)
Method 2: Multiple Queries
Use this when you need variables from different machines or want separate control over each.
In the query editor, click + Query to add a new query
[SCREENSHOT: Add Query button location]
Configure the second query with a different site, machine, or variable
Each query appears as a separate section (Query A, Query B, etc.)
[SCREENSHOT: Panel with two queries configured]
Best for: Comparing the same variable across different machines
Comparing Actual vs. Setpoint Values
A common manufacturing use case is comparing measured values (actual) with target values (setpoint). Let's style them so they're easy to distinguish.
Step 1: Add Both Variables
Select both actual and setpoint variables
In your query, select both the actual and setpoint variables
Example: "Abzugsgeschwindigkeit" (actual line speed)
Example: "Abzugsgeschwindigkeit (Soll)" (target line speed)
[SCREENSHOT: Both actual and setpoint variables selected]
Step 2: Apply Field Overrides
Field overrides let you style specific series differently.
Create override for the actual value
In the right sidebar, scroll down to Overrides
Click + Add field override
Choose the actual value (e.g., "Abzugsgeschwindigkeit")
[SCREENSHOT: Override selector with field name]
Click + Add override property
Select Standard options > Color
Choose a fixed color (e.g., blue)
[SCREENSHOT: Color override being set to blue]
Step 3: Style the Setpoint as Dashed
Create override for the setpoint field
Add another override for the setpoint field
Set a different color (e.g., orange)
Add another property: Graph styles > Line style
Select Dash and configure the dash pattern (e.g., 10, 10)
[SCREENSHOT: Line style override set to dashed]
Your chart now clearly distinguishes actual values (solid blue line) from setpoints (dashed orange line).
[SCREENSHOT: Final chart with actual vs setpoint styling]
Line Styling Options
Grafana offers many ways to customize how lines appear.
Accessing Style Options
Style options are in the right sidebar under different sections:
Draw style, line interpolation, line width, fill opacity, gradient, point size
Unit, color scheme, decimals, min/max
Common Style Settings
Controls the thickness of the line.
Adjust line width
In the sidebar, find Graph styles → Line width
Default is 1, increase to 2 or 3 for more prominent lines
[SCREENSHOT: Line width slider]
Dense charts with many variables
Standard dashboards (recommended)
Large displays, shopfloor monitors
Adds a shaded area under the line.
Set fill opacity
Find Graph styles → Fill opacity
Set a value from 0 (no fill) to 100 (solid)
[SCREENSHOT: Fill opacity comparison - 0 vs 30]
Tip: A subtle fill (10-30%) helps distinguish overlapping lines.
Creates a color gradient in the fill area.
Choose gradient mode
Find Graph styles → Gradient mode
Options:
Opacity: Fades from top to bottom
Hue: Color shifts across the gradient
Scheme: Uses the color scheme gradient
[SCREENSHOT: Different gradient modes comparison]
Line Interpolation
Controls how points are connected.
Straight lines between points
[SCREENSHOT: Line interpolation modes comparison]
Displays data points as dots on the line.
Find Graph styles → Point size
Options:
Auto: Shows points when zoomed in
Always: Always shows points
Never: Never shows points
Legend Configuration
A well-configured legend helps users understand the data at a glance.
Legend Display Modes
Set legend mode
In the sidebar, find Legend
Simple list of series names
Table with configurable statistics
[SCREENSHOT: Legend mode comparison - List vs Table]
Recommendation: Use Table mode for dashboards where users need to see values.
Legend Placement
Bottom: Below the chart (default, best for wide panels)
Right: To the right of the chart (good for tall panels)
Adding Statistics to the Legend
When using Table mode, you can display calculated values:
Choose legend values
Under Legend, find Values
Select the statistics to display:
Most recent non-null value
Minimum value in time range
Maximum value in time range
[SCREENSHOT: Legend with Min, Max, Mean, Last values displayed]
Manufacturing tip: For process monitoring, Min, Max, and Mean help quickly identify if values stayed within expected ranges.
Tooltips appear when you hover over the chart.
In the sidebar, find Tooltip
Shows only the hovered series
Shows all series at that time point
[SCREENSHOT: Tooltip mode comparison]
Recommendation: Use All when comparing multiple series, Single for cleaner hover on busy charts.
When showing all series, you can sort them:
Ascending: Lowest value first
Descending: Highest value first
Practical Example: Process Monitoring Panel
Let's build a panel that monitors line speed with proper styling:
Abzugsgeschwindigkeit, Abzugsgeschwindigkeit (Soll)
Orange, dashed (via override)
Overrides Summary
Abzugsgeschwindigkeit (Soll)
[SCREENSHOT: Complete process monitoring panel with all settings applied]
Tips and Best Practices
Color Selection
Use blue for actual/measured values (industry convention)
Use orange or yellow for setpoints/targets
Use red only for errors or alerts
Use green for "good" status indicators
When to Use Fill
Many variables (>10) in one panel can slow rendering
Consider splitting into multiple panels for better performance
Use longer time ranges with care on high-frequency data
You've learned how to create professional time series visualizations:
✅ Display multiple variables in one chart
✅ Compare actual vs. setpoint with distinct styling
✅ Customize line appearance (width, fill, gradient)
✅ Configure informative legends with statistics
✅ Set up helpful tooltips
Continue learning about visualization types:
Single Value Displays – Stat, Gauge, and Bar Gauge panels
Tables – Displaying data in tabular format
Advanced Styling – Thresholds, units, and more
Quick Reference
Override Properties for Time Series
Property
Path
Example Values
Graph styles > Line style
Graph styles > Line width
Graph styles > Fill opacity
Keyboard Shortcuts
