How to shade a Area in Line chart

[Ibrahim_shaik]

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.

[Shivu-2000 · Accepted solution]

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:

  ShadeAmount = IF( SELECTEDVALUE('Date'[IsInRange]) = "In Range", MAX('YourTable'[Amount]), -- Or a high constant like 100 BLANK() )3. Add both lines to the same visual

  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!

[rohit1991 · Accepted solution]

Hi @Ibrahim_shaik 

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

https://learn.microsoft.com/en-us/power-bi/visuals/power-bi-visualization-combo-chart?tabs=powerbi-d... 

[v-sshirivolu · Accepted solution]

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")

[danextian · Accepted solution]

Hi @Ibrahim_shaik 

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]

Hi @danextian ,

I implemented the solution that you have provided and it worked.

Thank you.

[Ibrahim_shaik]

Hi @danextian ,

Thank you so much for providing the solution. I will implement this and will let you know.

Thanks alot.

[rohit1991 · Accepted solution]

Hi @Ibrahim_shaik 

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

https://learn.microsoft.com/en-us/power-bi/visuals/power-bi-visualization-combo-chart?tabs=powerbi-d... 

[Shivu-2000 · Accepted solution]

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:

  ShadeAmount = IF( SELECTEDVALUE('Date'[IsInRange]) = "In Range", MAX('YourTable'[Amount]), -- Or a high constant like 100 BLANK() )3. Add both lines to the same visual

  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]

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.

[v-sshirivolu · Accepted solution]

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")