RuleChart#

The RuleChart component displays a range or duration for each labeled item as a horizontal or vertical rule. It is suitable for visualizing time spans, data ranges, or active periods across categories.

Example#

1<RuleChart
2  labelOnYAxis
3  marks={[
4    { label: "Trees", start: 1, end: 10 },
5    { label: "Grass", start: 3, end: 11 },
6    { label: "Weeds", start: 4, end: 12 },
7  ]}
8/>

Props#

labelOnYAxis (optional)#

• Type: boolean
• Default: false
• Description: When set to true, the chart switches to horizontal mode and displays category labels along the Y-axis. Otherwise, labels appear on the X-axis with vertical rules.

marks (required)#

• Type:

  1Array<{
  2  label: string | Date;
  3  start: number;
  4  end: number;
  5  unit?: CalendarComponent;
  6} & ChartMarkProps>

• Description: Defines the rules (lines or spans) to be drawn on the chart.

Each mark includes:#

• label: The category label or time unit (e.g., "Trees" or a Date).
• start: The numeric starting value of the rule.
• end: The numeric ending value of the rule.
• unit: (optional) The time unit, useful when the chart represents calendar-based data (e.g., .month, .day).

Additional ChartMarkProps can be applied to customize visual styling:

• foregroundStyle — Controls color or style
• annotation — Adds annotation labels
• opacity — Adjusts transparency

Full Example#

1const data = [
2  { startMonth: 1, numMonths: 9, source: "Trees" },
3  { startMonth: 12, numMonths: 1, source: "Trees" },
4  { startMonth: 3, numMonths: 8, source: "Grass" },
5  { startMonth: 4, numMonths: 8, source: "Weeds" },
6]
7
8<RuleChart
9  labelOnYAxis
10  marks={data.map(item => ({
11    start: item.startMonth,
12    end: item.startMonth + item.numMonths,
13    label: item.source,
14  }))}
15/>

Use Cases#

• Displaying periods of activity or growth (e.g., pollen seasons)
• Showing task durations or project phases
• Visualizing ranges in data for different categories