Area Pieces

Overview

Area pieces selectively highlight specific segments of an area chart by applying different colors or opacity to chosen time periods or index ranges. This technique draws attention to important intervals while maintaining the context of the complete dataset.

When to use

• Highlight specific time periods of interest (events, campaigns, incidents)
• Emphasize comparison windows (before/after analysis)
• Mark special conditions or operational states
• Draw attention to peak or anomalous periods

Not ideal

• When all time periods are equally important
• With too many highlighted segments (reduces focus)
• When continuous gradients better show transitions
• For value-based thresholds (use visualMap by value instead)

Key variations

• Index-based (by position) vs time-based segmentation
• Multiple colored segments vs single highlight color
• With or without boundary markers (vertical lines)
• Visible legend vs hidden legend (self-explanatory highlights)

Use cases

• Marketing: Highlight campaign periods vs baseline performance
• Incident analysis: Mark outage or degradation windows
• Seasonal comparison: Emphasize holiday or peak seasons
• A/B testing: Compare test periods with control periods
• Event impact: Show before/during/after major events
• Compliance windows: Highlight periods requiring special attention

Data (CSV)

x,y
2019-10-10,200
2019-10-11,560
2019-10-12,750
2019-10-13,580
2019-10-14,250
2019-10-15,300
2019-10-16,450
2019-10-17,300
2019-10-18,100

Performance tips

• Limit to 2-4 highlighted segments for maximum impact
• Use contrasting colors that are accessible to colorblind users
• Add vertical markers (markLine) to clearly demarcate segment boundaries
• Consider using annotation labels to explain why segments are highlighted
• Keep base area opacity lower to make highlights more prominent

FAQ

What does "dimension: 0" mean in the visualMap? It means the segmentation is based on the x-axis index (dimension 0). For a chart with 9 data points, indices 0-8 represent each position along the x-axis. This allows you to highlight specific time periods or ranges.

Why are the pieces defined with "gt" and "lt"? gt (greater than) and lt (less than) define the index range for each highlighted segment. For example, "gt": 1, "lt": 3 highlights data points at indices 2 (between 1 and 3), creating the colored area fill for that range.

What's the purpose of markLine in this example? The markLine draws vertical dashed lines at specific x-axis positions (indices 1, 3, 5, 7) to visually mark the boundaries of the highlighted regions. This helps readers identify exactly where each zone begins and ends.

How do I choose which segments to highlight? Identify the time periods or data ranges that are most important to your story:

• Periods of exceptional performance or concern
• Time windows with special conditions or events
• Comparison periods (e.g., before/after an intervention)
• Peak or off-peak periods

Can I use different colors for each highlighted segment? Yes! Each piece in the visualMap can have its own color. Use different colors to indicate different types of events or severity levels (e.g., blue for positive events, red for incidents).

Why is the area fill lighter in non-highlighted regions? The base areaOpacity of 0.4 applies to the entire area. The visualMap pieces override this for specific segments, creating a visual contrast that draws attention to the highlighted portions while maintaining context with the full dataset.

When should I hide the visualMap legend (show: false)? Hide the legend when:

• The highlighted segments are self-explanatory (marked by lines or labels)
• You're emphasizing specific time periods that don't need categorical labels
• The chart already has other legend elements

Show the legend when the colored segments represent distinct categories that need identification (e.g., "Weekend", "Promotion Period", "Maintenance Window").

How many highlighted segments should I use? Limit to 2-4 highlighted segments for clarity. Too many highlighted regions dilute the emphasis and make the chart harder to interpret. Focus on the most critical periods.