> ## 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 Point

> Add a reference point inside a chart

<img src="https://mintcdn.com/evidence/ImoR9rIJqT9N0Esa/images/components/reference_point/reference_point.png?fit=max&auto=format&n=ImoR9rIJqT9N0Esa&q=85&s=3a51d5131a4dd73e4e5d2c4b56204be9" alt="Hardcoded Point" width="1000" height="430" data-path="images/components/reference_point/reference_point.png" />

```liquid theme={null}
{% line_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
%}
    {% reference_point
        x="2024-12-01"
        y=4441307
        label="Peak Month"
        color="green"
        label_options={
            position="left"
        }
    /%}
{% /line_chart %}
```

## Examples

### Hardcoded Point

<img src="https://mintcdn.com/evidence/ImoR9rIJqT9N0Esa/images/components/reference_point/reference_point.png?fit=max&auto=format&n=ImoR9rIJqT9N0Esa&q=85&s=3a51d5131a4dd73e4e5d2c4b56204be9" alt="Hardcoded Point" width="1000" height="430" data-path="images/components/reference_point/reference_point.png" />

```liquid theme={null}
{% line_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
%}
    {% reference_point
        x="2024-12-01"
        y=4441307
        label="Peak Month"
        color="green"
        label_options={
            position="left"
        }
    /%}
{% /line_chart %}
```

### Point from Data

<img src="https://mintcdn.com/evidence/ImoR9rIJqT9N0Esa/images/components/reference_point/example-1.png?fit=max&auto=format&n=ImoR9rIJqT9N0Esa&q=85&s=67c93e22e371e08754cfae473ee887ed" alt="Point from Data" width="1000" height="430" data-path="images/components/reference_point/example-1.png" />

````liquid theme={null}
```sql top_months
select 
    toStartOfMonth(date) as month,
    sum(total_sales) as sales,
    'Top ' || row_number() over (order by sum(total_sales) desc) as label
from demo.daily_orders
group by month
order by sales desc
limit 3
```

{% line_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
%}
    {% reference_point 
        data="top_months"
        x="month" 
        y="sales" 
        label="label"
        color="purple"
    /%}
{% /line_chart %}
````

### Callout Style

<img src="https://mintcdn.com/evidence/ImoR9rIJqT9N0Esa/images/components/reference_point/example-2.png?fit=max&auto=format&n=ImoR9rIJqT9N0Esa&q=85&s=36118aaf02a7ab987c350e3c593caa20" alt="Callout Style" width="1000" height="430" data-path="images/components/reference_point/example-2.png" />

```liquid theme={null}
{% line_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
%}
    {% reference_point 
        x="2021-02-01" 
        y=1754436 
        label="Lowest Month"
        color="red"
        label_options={
            variant="callout"
            position="top"
        }
    /%}
{% /line_chart %}
```

### Custom Symbol

<img src="https://mintcdn.com/evidence/ImoR9rIJqT9N0Esa/images/components/reference_point/example-3.png?fit=max&auto=format&n=ImoR9rIJqT9N0Esa&q=85&s=4533490d3cf14fc96267e9367249591f" alt="Custom Symbol" width="1000" height="430" data-path="images/components/reference_point/example-3.png" />

```liquid theme={null}
{% line_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
%}
    {% reference_point 
        x="2023-12-01" 
        y=3720260 
        label="Record High"
        symbol_options={
            shape="diamond"
            size=12
            color="gold"
        }
        label_options={
            position="right"
            color="orange"
        }
    /%}
{% /line_chart %}
```

## Attributes

<ResponseField name="data" type="string">
  Query name to use for placing multiple points from data
</ResponseField>

<ResponseField name="label" type="string">
  Text label to display at the reference point
</ResponseField>

<ResponseField name="color" type="string">
  Color of the point marker
</ResponseField>

<ResponseField name="x" type="string | number" required>
  X-axis position of the point (e.g., a date or category)
</ResponseField>

<ResponseField name="y" type="string | number" required>
  Y-axis position of the point (e.g., a value)
</ResponseField>

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

<ResponseField name="symbol_options" type="options group">
  Styling options for the point marker

  **Example:**

  ```
  symbol_options={
    shape = "circle"
    size = 0
    color = "string"
  }
  ```

  **Attributes:**

  * shape: `string`
    * **Allowed values:**
      * `circle`
      * `emptyCircle`
      * `rect`
      * `roundRect`
      * `triangle`
      * `diamond`
      * `pin`
      * `arrow`
      * `none`
      * `image://`
      * `path://`
  * size: `number`
  * 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)