Forum Discussion
How to shade a Area in Line chart
Hi Power BI Community,
I have a Line chart with Date on X-axis and amount on Y-axis and X-axis is set to categorical and I want to shade the area between two dates. the shaded area cannot be static it should move when i scroll the x axis. how can i acheive this?
I have attached a screenshot below for refernce.
Please suggest a solution.
Thanks & Regards,
Ibrahim.
Hi Ibrahim_shaik
As per my understanding to dynamically shade a region between two dates on a categorical X-axis line chart in Power BI, especially such that the shaded area moves with scrolling, you can follow:
1. Add a calculated column (or measure) in your Date table to define the shading range:IsInRange = IF( 'Date'[Date] >= DATE(2025, 7, 17) && 'Date'[Date] <= DATE(2025, 7, 23), "In Range", "Out of Range" )2. You’ll need to create a second line that mimics shading using an area chart or stacked area visuals.
-
Create a measure like this:
3. Add both lines to the same visualShadeAmount = IF( SELECTEDVALUE('Date'[IsInRange]) = "In Range", MAX('YourTable'[Amount]), -- Or a high constant like 100 BLANK() )Since line charts in Power BI don’t allow two Y-axes, try:
-
Use a combo chart (Line and Area chart)
-
Line for actual data
-
Area chart (with transparency or color) for shading
4. Format the shading area
-
Set the area chart fill color to red and reduce transparency
-
Remove the markers and legend if needed
-
Set X-axis to Categorical
-
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Happy to help! -
-
You can achieve dynamic shading in a line chart by using a Line and Stacked Column Chart and adding a custom flag for shading.
To solve the problem follow steps given below:
Step 1: Create Custom Column in Power Query
powerqueryCopyEditif [Date] >= #date(2025, 7, 17) and [Date] <= #date(2025, 7, 21) then "Shade" else "No Shade"This creates a Custom column with values like "Shade" or "No Shade".
Step 2: Create a calculated column for shaded amount:
DAXCopyEditShadedAmount = IF( 'Sheet1'[Custom] = "Shade", 'Sheet1'[Amount], BLANK() )Step 3: Use a Line and Stacked Column Chart:
- X-axis >> Date
- Column Y-axis >> ShadedAmount (this becomes the shaded region)
- Line Y-axis >> Amount (your main metric)
Step 4: Format the visual:
- Use light red fill for columns
- Use blue line for the actual data
Now the shaded area scrolls dynamically with the X-axis and stays perfectly aligned with the data.
Reference
- Anonymous1 year ago
Hi Ibrahim_shaik ,
Set the X-axis to Categorical and make it wide enough for horizontal scrolling.
For IsInRange, use dynamic values like MIN/MAX from a slicer instead of hardcoded dates to make it interactive.
For better visual balance, consider replacing MAX(Amount) with either a high constant or a dynamic Y-max measure to prevent chart distortion.
If you need help setting up the dynamic slicer
IsInRange =
VAR startDate = MIN('Date'[SelectedStart])
VAR endDate = MAX('Date'[SelectedEnd])
RETURN IF('Date'[Date] >= startDate && 'Date'[Date] <= endDate, "In Range", "Out of Range") You can use either an area line chart or a line-combo visual. Both approaches require a disconnected table to define the highlight date range, along with two separate measures - one for the main line and another for the highlight. While a categorical axis is supported, it may not render well if there are too many data points. If you're using the combo visual, set the spacing between categories to zero. Also, keep in mind that when using a continuous axis with a large number of data points in a small chart, the highlight columns can appear distorted.
Please see the attached pbix.
7 Replies
- Shivu-2000
Responsive Resident
Hi Ibrahim_shaik
As per my understanding to dynamically shade a region between two dates on a categorical X-axis line chart in Power BI, especially such that the shaded area moves with scrolling, you can follow:
1. Add a calculated column (or measure) in your Date table to define the shading range:IsInRange = IF( 'Date'[Date] >= DATE(2025, 7, 17) && 'Date'[Date] <= DATE(2025, 7, 23), "In Range", "Out of Range" )2. You’ll need to create a second line that mimics shading using an area chart or stacked area visuals.
-
Create a measure like this:
3. Add both lines to the same visualShadeAmount = IF( SELECTEDVALUE('Date'[IsInRange]) = "In Range", MAX('YourTable'[Amount]), -- Or a high constant like 100 BLANK() )Since line charts in Power BI don’t allow two Y-axes, try:
-
Use a combo chart (Line and Area chart)
-
Line for actual data
-
Area chart (with transparency or color) for shading
4. Format the shading area
-
Set the area chart fill color to red and reduce transparency
-
Remove the markers and legend if needed
-
Set X-axis to Categorical
-
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Happy to help! -
- Ibrahim_shaik
Helper V
Hi Shivu-2000 ,
Thank you so much for providing the solution.
Combo chart line and area is not a native visual right so I tried to find it in the Get more visuals but I couldn't find one. Can you please let me know from where i can get the line and area combo chart.
Thank you.
- AnonymousNot applicable
Hi Ibrahim_shaik ,
Set the X-axis to Categorical and make it wide enough for horizontal scrolling.
For IsInRange, use dynamic values like MIN/MAX from a slicer instead of hardcoded dates to make it interactive.
For better visual balance, consider replacing MAX(Amount) with either a high constant or a dynamic Y-max measure to prevent chart distortion.
If you need help setting up the dynamic slicer
IsInRange =
VAR startDate = MIN('Date'[SelectedStart])
VAR endDate = MAX('Date'[SelectedEnd])
RETURN IF('Date'[Date] >= startDate && 'Date'[Date] <= endDate, "In Range", "Out of Range")
-
- rohit1991
Super User
You can achieve dynamic shading in a line chart by using a Line and Stacked Column Chart and adding a custom flag for shading.
To solve the problem follow steps given below:
Step 1: Create Custom Column in Power Query
powerqueryCopyEditif [Date] >= #date(2025, 7, 17) and [Date] <= #date(2025, 7, 21) then "Shade" else "No Shade"This creates a Custom column with values like "Shade" or "No Shade".
Step 2: Create a calculated column for shaded amount:
DAXCopyEditShadedAmount = IF( 'Sheet1'[Custom] = "Shade", 'Sheet1'[Amount], BLANK() )Step 3: Use a Line and Stacked Column Chart:
- X-axis >> Date
- Column Y-axis >> ShadedAmount (this becomes the shaded region)
- Line Y-axis >> Amount (your main metric)
Step 4: Format the visual:
- Use light red fill for columns
- Use blue line for the actual data
Now the shaded area scrolls dynamically with the X-axis and stays perfectly aligned with the data.
Reference
- danextian
Super User
You can use either an area line chart or a line-combo visual. Both approaches require a disconnected table to define the highlight date range, along with two separate measures - one for the main line and another for the highlight. While a categorical axis is supported, it may not render well if there are too many data points. If you're using the combo visual, set the spacing between categories to zero. Also, keep in mind that when using a continuous axis with a large number of data points in a small chart, the highlight columns can appear distorted.
Please see the attached pbix.
- Ibrahim_shaik
Helper V
Hi danextian ,
Thank you so much for providing the solution. I will implement this and will let you know.
Thanks alot.
- Ibrahim_shaik
Helper V