How to design a chart that has an x-axis with a fixed range that is longer than the selected range?
I'm designing a web-based analytics dashboard that contains a chart in which the x-axis represents the days of a campaign, and it always shows 31 days. However, the duration of a campaign varies; it may be predefined to any period between a single to 31 days.
In cases when the campaign's duration is shorter than 31 days, I want to make it clear which area of the chart is relevant.
Are there any existing best practice solutions for this scenario?
One idea I have is graying out the area that's not required (see image below).
The chart's width is fixed and optimized for displaying a 31-days range. I'm not changing the number of days on the x-axis to avoid scenarios in which there is a single floating dot or bar on the screen or several data points with vast space between them (see images below).