04 Advanced Styling
Advanced styling options for Grafana panels.
What You'll Learn
Master field overrides to style individual series
Apply custom colors consistently across dashboards
Configure units and decimal precision
Use dashboard-wide settings for professional appearance
Create transparent panels for clean shopfloor displays
Prerequisites
Completed earlier tutorials in this section
Understanding of basic panel configuration
Overview
Professional dashboards require consistent styling to be readable and visually appealing. This tutorial covers advanced styling techniques that transform basic panels into polished, production-ready visualizations.
Key styling areas:
Field overrides – Style specific series differently
Color schemes – Consistent colors across panels
Units and formatting – Proper display of values
Dashboard theming – Cohesive visual appearance
Field Overrides
Field overrides let you apply different settings to specific series within a panel. This is essential when you want one series to look different from others.
When to Use Overrides
One series needs a different color
Override by name
Setpoint lines should be dashed
Override by name
All temperature variables need °C unit
Override by regex
Hide specific series from legend
Override by name
Override Types
1. Fields with Name
Match a specific field by its exact name.
In the panel editor, find Overrides in the right sidebar
Click + Add field override
Select Fields with name
Choose the field from the dropdown
[SCREENSHOT: Override selector showing "Fields with name" option]
Use case: Style "Abzugsgeschwindigkeit (Soll)" as a dashed line.
2. Fields Matching Regex
Match multiple fields using a regular expression pattern.
Click + Add field override
Select Fields matching regex
Enter a pattern:
.*Durchsatz.*– Matches any field containing "Durchsatz"Extruder [ABC].*– Matches Extruder A, B, or C fields.*\(Soll\)$– Matches fields ending with "(Soll)"
[SCREENSHOT: Regex override matching multiple fields]
Use case: Apply the same color to all setpoint values (fields ending in "Soll").
3. Fields with Type
Match fields by their data type.
Click + Add field override
Select Fields with type
Choose: Number, String, Time, Boolean, etc.
Use case: Format all numeric fields with 2 decimal places.
Adding Override Properties
After selecting fields, add the properties you want to override:
Click + Add override property
Browse or search for the property
Configure the value
Common override properties:
Color
Standard options > Color
Fixed color for series
Unit
Standard options > Unit
Display unit
Decimals
Standard options > Decimals
Decimal precision
Display name
Standard options > Display name
Custom label
Line style
Graph styles > Line style
Solid, Dash, Dots
Line width
Graph styles > Line width
Thickness
Fill opacity
Graph styles > Fill opacity
Area fill
Y-axis
Axis > Placement
Left or Right axis
[SCREENSHOT: Override property selector showing common options]
Override Example: Actual vs. Setpoint
Style actual values and setpoints differently:
Actual value override:
Color
Blue (fixed)
Line width
2
Fill opacity
10
Setpoint override:
Color
Orange (fixed)
Line style
Dash (10, 10)
Line width
1
[SCREENSHOT: Panel with styled actual vs setpoint lines]
Custom Colors
Consistent color usage helps users quickly understand your dashboards.
Color Modes
In Standard options > Color scheme, choose from:
Single color
One color for all series
Simple panels
By value
Color based on thresholds
Status indicators
Classic palette
Auto-assigned distinct colors
Multiple series
Fixed color
Specific color per series
Controlled styling
Fixed Colors
For precise control, use fixed colors:
In Standard options, find Color scheme
Select Single color or use Overrides
Click the color picker
Choose from:
Preset colors (Green, Blue, Red, etc.)
Custom hex code (#3274D9)
[SCREENSHOT: Color picker with preset and custom options]
Recommended Color Conventions
Follow these conventions for manufacturing dashboards:
Blue
Actual/measured values
Orange
Setpoint/target values
Green
Good status, within range
Yellow
Warning, approaching limit
Red
Error, out of range
Purple
Calculated/derived values
Gray
Reference, baseline
Color Scheme Options
For automatic coloring of multiple series:
Classic palette
Grafana's default distinct colors
Green-Yellow-Red
Gradient for performance metrics
Blue-Purple
Cool tones for related series
Temperature
Blue (cold) to red (hot)
[SCREENSHOT: Different color schemes applied to same data]
Units and Decimals
Proper units make values immediately understandable.
Configuring Units
In the right sidebar, find Standard options
Click the Unit dropdown
Browse categories or search:
[SCREENSHOT: Unit selector with categories]
Common Manufacturing Units
Throughput
Mass flow rate (kg/h, t/h)
Temperature
Celsius (°C), Fahrenheit (°F)
Pressure
Bar, PSI, Pascal
Speed
Meters per minute (m/min), RPM
Length
Millimeters (mm), Meters (m)
Time
Seconds (s), Minutes (min), Hours (h)
Percentage
Percent (0-100), Percent (0.0-1.0)
Custom Units
If your unit isn't in the list:
Select Misc > Custom
Enter your unit suffix (e.g., "pieces/h")
Or use the format string:
Select Misc > String
Enter a format like
${__value} kg/U/min
Decimal Precision
Control how many decimal places are shown:
In Standard options, find Decimals
Enter the number of decimal places (0, 1, 2, etc.)
Leave empty for automatic
[SCREENSHOT: Decimals setting in standard options]
Guidelines:
Counts/integers
0
Temperatures
1
Percentages
1-2
Precise measurements
2-3
Min and Max Values
Set value boundaries for gauges and color scales:
In Standard options, find Min and Max
Enter the value range
Example: For a temperature gauge 0-300°C:
Min: 0
Max: 300
Dashboard-Wide Settings
Create a cohesive look across all panels.
Panel Options
Transparent Background
Make panel backgrounds transparent for a cleaner look:
In panel edit mode, find Panel options in the right sidebar
Enable Transparent background
[SCREENSHOT: Panel with and without transparent background]
Best for: Shopfloor displays, presentations, dark themes.
Panel Title
Clear, descriptive titles
Use consistent naming patterns (e.g., "Machine A - Temperature")
Keep titles short for small panels
Panel Description
Add context that appears on hover:
In Panel options, find Description
Enter helpful information
[SCREENSHOT: Panel showing description tooltip]
Grid and Layout
Consistent Panel Sizes
Use standard sizes across your dashboard:
Single stat
4×3 or 6×4
Time series
12×8 or 24×8
Gauge
4×4 or 6×6
Table
12×8 or 24×12
Grid Snapping
Panels snap to a 24-column grid. Use consistent widths:
Full width: 24
Half width: 12
Third width: 8
Quarter width: 6
Time Settings
Dashboard Time Range
Set appropriate defaults:
In dashboard settings (gear icon), find Time options
Set Default time range (e.g., Last 6 hours)
Configure Refresh interval (e.g., 30s for live monitoring)
Panel-Level Time Override
Override dashboard time for specific panels:
In panel edit, find Query options
Set Relative time (e.g., "1h" for last hour regardless of dashboard time)
Threshold Styling on Charts
Show threshold levels directly on time series charts.
Threshold Display Modes
In the panel editor sidebar, find Thresholds
Add thresholds with values and colors
Find Graph styles > Threshold display
Choose a mode:
Off
Thresholds only affect legend colors
As lines
Horizontal lines at threshold values
As filled regions
Colored areas between thresholds
Both
Lines and filled regions
[SCREENSHOT: Time series with threshold lines visible]
Example: Temperature Limits
Base
Green
Normal
80
Yellow
Warning
100
Red
Critical
With As lines mode, horizontal lines appear at 80 and 100.
Axis Configuration
Control how axes appear on time series panels.
Y-Axis Options
In the sidebar, find Axis
Configure:
Placement
Auto, Left, Right, Hidden
Label
Custom axis label
Width
Fixed width in pixels
Soft min/max
Suggested range (can expand)
Hard min/max
Fixed range (values clipped)
Multiple Y-Axes
Display series with different units on separate axes:
Add an override for the series
Add Axis > Placement property
Select Right
[SCREENSHOT: Panel with dual Y-axes]
Example: Show temperature (°C, left axis) and throughput (kg/h, right axis) together.
Axis Color Modes
Text
Uses theme text color
Series
Axis color matches series color
Tip: Use "Series" color mode when displaying multiple series on different axes – makes it clear which axis belongs to which data.
Practical Example: Shopfloor Panel
Build a professional panel for shopfloor display:
Panel Configuration
Visualization
Time Series
Title
Line Speed - Extruder A
Transparent
Yes
Time range
Last 1 hour
Styling
Line width
2
Fill opacity
15
Gradient
Opacity
Point size
Never show
Legend
Table mode with Last, Min, Max
Overrides
Actual speed
Blue
Solid, width 2
Setpoint
Orange
Dashed, width 1
Thresholds
Base
Green
90% of setpoint
Yellow
80% of setpoint
Red
[SCREENSHOT: Complete shopfloor panel with all styling applied]
Tips and Best Practices
Consistency Checklist
Performance Tips
Avoid excessive overrides (impacts rendering)
Use regex overrides to style many fields at once
Transparent panels render slightly faster
Accessibility
Use sufficient color contrast
Don't rely on color alone – add text labels
Test with colorblind-friendly palettes
Summary
You've learned advanced styling techniques:
Field overrides for per-series customization
Consistent color usage across dashboards
Proper units and decimal formatting
Dashboard-wide visual settings
Threshold display on charts
Multi-axis configuration
What's Next?
You've completed the Visualization Types section. Continue with:
Dashboard Organization – Rows, folders, and linking
Transformations – Data manipulation
Quick Reference
Override Match Types
Fields with name
"Durchsatz"
Exact match only
Fields matching regex
.*Durchsatz.*
Contains "Durchsatz"
Fields with type
Number
All numeric fields
Common Override Properties
Color
Standard options > Color
Unit
Standard options > Unit
Decimals
Standard options > Decimals
Display name
Standard options > Display name
Min/Max
Standard options > Min/Max
Line style
Graph styles > Line style
Line width
Graph styles > Line width
Fill opacity
Graph styles > Fill opacity
Axis
Axis > Placement
Color Conventions
Blue
Actual values
Orange
Setpoints
Green
Good/OK
Yellow
Warning
Red
Critical
Unit Categories
Data rate
kg/h, t/h, pieces/min
Temperature
°C, °F, K
Pressure
bar, psi, Pa
Length
mm, m, cm
Time
s, ms, min, h
Last updated