> ## Documentation Index
> Fetch the complete documentation index at: https://docs.evidence.studio/llms.txt
> Use this file to discover all available pages before exploring further.

# Reference Area

> Add a reference area inside a chart

<img src="https://mintcdn.com/evidence/Z2CIIsynbphd2HX3/images/components/reference_area/reference_area.png?fit=max&auto=format&n=Z2CIIsynbphd2HX3&q=85&s=84ca2a0843bc491c55a6bba41d3771d6" alt="Highlight Date Range" width="1000" height="430" data-path="images/components/reference_area/reference_area.png" />

```liquid theme={null}
{% line_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
%}
    {% reference_area 
        x_min="2023-11-01" 
        x_max="2024-02-01" 
        label="Peak Season"
        color="green"
    /%}
{% /line_chart %}
```

## Examples

### Highlight Date Range

<img src="https://mintcdn.com/evidence/Z2CIIsynbphd2HX3/images/components/reference_area/reference_area.png?fit=max&auto=format&n=Z2CIIsynbphd2HX3&q=85&s=84ca2a0843bc491c55a6bba41d3771d6" alt="Highlight Date Range" width="1000" height="430" data-path="images/components/reference_area/reference_area.png" />

```liquid theme={null}
{% line_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
%}
    {% reference_area 
        x_min="2023-11-01" 
        x_max="2024-02-01" 
        label="Peak Season"
        color="green"
    /%}
{% /line_chart %}
```

### Horizontal Value Band

<img src="https://mintcdn.com/evidence/Z2CIIsynbphd2HX3/images/components/reference_area/example-1.png?fit=max&auto=format&n=Z2CIIsynbphd2HX3&q=85&s=cf6c3d7eb7a9922ce9450598f7a5958d" alt="Horizontal Value Band" width="1000" height="430" data-path="images/components/reference_area/example-1.png" />

```liquid theme={null}
{% line_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
%}
    {% reference_area 
        y_min=2500000 
        y_max=4000000 
        label="Target Range"
        color="blue"
    /%}
{% /line_chart %}
```

### Areas from Data

<img src="https://mintcdn.com/evidence/Z2CIIsynbphd2HX3/images/components/reference_area/example-2.png?fit=max&auto=format&n=Z2CIIsynbphd2HX3&q=85&s=9ea25045233995199a8ec10848e0ef4e" alt="Areas from Data" width="1000" height="430" data-path="images/components/reference_area/example-2.png" />

````liquid theme={null}
```sql seasons
select '2021-01-01' as start_date, '2021-03-31' as end_date, 'Q1' as quarter
union all
select '2021-04-01', '2021-06-30', 'Q2'
union all
select '2021-07-01', '2021-09-30', 'Q3'
union all
select '2021-10-01', '2021-12-31', 'Q4'
```

{% bar_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
%}
    {% reference_area 
        data="seasons"
        x_min="start_date" 
        x_max="end_date" 
        label="quarter"
    /%}
{% /bar_chart %}
````

### Custom Styling

<img src="https://mintcdn.com/evidence/Z2CIIsynbphd2HX3/images/components/reference_area/example-3.png?fit=max&auto=format&n=Z2CIIsynbphd2HX3&q=85&s=7054330ded43a677c25ec5b5b4b8e2a6" alt="Custom Styling" width="1000" height="430" data-path="images/components/reference_area/example-3.png" />

```liquid theme={null}
{% line_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
%}
    {% reference_area 
        y_min=3000000 
        y_max=4500000 
        label="Goal Zone"
        color="green"
        area_options={ 
            border={ width=2 type="dashed" color="green" }
        }
        label_options={
            position="top_right"
            color="green"
        }
    /%}
{% /line_chart %}
```

## Attributes

<ResponseField name="data" type="string">
  Query name to use for calculating dynamic area boundaries
</ResponseField>

<ResponseField name="label" type="string">
  Text label to display in the reference area
</ResponseField>

<ResponseField name="x_min" type="string | number">
  Left boundary of the area (e.g., a start date)
</ResponseField>

<ResponseField name="x_max" type="string | number">
  Right boundary of the area (e.g., an end date)
</ResponseField>

<ResponseField name="y_min" type="string | number">
  Bottom boundary of the area (e.g., a minimum value)
</ResponseField>

<ResponseField name="y_max" type="string | number">
  Top boundary of the area (e.g., a maximum value)
</ResponseField>

<ResponseField name="color" type="string" default="#0284c7">
  Fill color of the reference area
</ResponseField>

<ResponseField name="label_options" type="options group">
  Styling options for the label

  **Example:**

  ```
  label_options={
    position = "top_left"
    align = "left"
    color = "string"
    background_color = "string"
    padding = 0
    border = {
      width = 0
      type = "solid"
      color = "string"
      radius = 0
    }
    text = {
      size = 0
      bold = true
      italic = true
    }
  }
  ```

  **Attributes:**

  * position: `string`
    * **Allowed values:**
      * `top_left`
      * `top`
      * `top_right`
      * `bottom_left`
      * `bottom`
      * `bottom_right`
      * `left`
      * `center`
      * `right`
  * align: `string`
    * **Allowed values:**
      * `left`
      * `center`
      * `right`
  * color: `string`
  * background\_color: `string`
  * padding: `number`
  * border: `options group`
    * **Options:**
      * width: `number`
      * type: `string`
        * **Allowed values:**
          * `solid`
          * `dashed`
          * `dotted`
      * color: `string`
      * radius: `number`
  * text: `options group`
    * **Options:**
      * size: `number`
      * bold: `boolean`
      * italic: `boolean`
</ResponseField>

<ResponseField name="area_options" type="options group">
  Styling options for the area fill and border

  **Example:**

  ```
  area_options={
    color = "string"
    opacity = 0
    border = {
      width = 0
      type = "solid"
      color = "string"
    }
  }
  ```

  **Attributes:**

  * color: `string`
  * opacity: `number`
  * border: `options group`
    * **Options:**
      * width: `number`
      * type: `string`
        * **Allowed values:**
          * `solid`
          * `dashed`
          * `dotted`
      * color: `string`
</ResponseField>

## Allowed Parents

* [area\_chart](/components/area_chart)
* [bar\_chart](/components/bar_chart)
* [bubble\_chart](/components/bubble_chart)
* [combo\_chart](/components/combo_chart)
* [horizontal\_bar\_chart](/components/horizontal_bar_chart)
* [line\_chart](/components/line_chart)
* [scatter\_chart](/components/scatter_chart)