Skip to main content
{% line_chart
    data="demo_daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
%}
    {% reference_line 
        y=3500000 
        label="Target" 
        color="red" 
    /%}
{% /line_chart %}

​
Examples

​
Horizontal Target Line

{% line_chart
    data="demo_daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
%}
    {% reference_line 
        y=3500000 
        label="Target" 
        color="red" 
    /%}
{% /line_chart %}

​
Vertical Line at Date

{% line_chart
    data="demo_daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
%}
    {% reference_line 
        x="2021-06-01" 
        label="Product Launch" 
        color="green" 
    /%}
{% /line_chart %}

​
Reference Lines from Data

```sql ref_lines
select 2500000 as ref, 'Min Target' as ref_label
union all
select 4000000, 'Stretch Goal'
```

{% bar_chart
    data="demo_daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
%}
    {% reference_line 
        data="ref_lines" 
        y="ref" 
        label="ref_label" 
    /%}
{% /bar_chart %}

​
Custom Label Styling

{% line_chart
    data="demo_daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
%}
    {% reference_line 
        y=3000000 
        label="Threshold" 
        color="orange"
        label_options={
            position="above_start"
            background_color="orange"
            color="white"
            padding=4
        }
        line_options={
            type="dashed"
            width=2
        }
    /%}
{% /line_chart %}

​
Multiple Reference Lines

{% line_chart
    data="demo_daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
%}
    {% reference_line y=2500000 label="Min Target" color="red" /%}
    {% reference_line y=4500000 label="Stretch Goal" color="green" /%}
{% /line_chart %}

​
Attributes

​
data
string
Query name to use for calculating dynamic reference values
​
label
string
Text label to display on the reference line
​
x
string | number
X-axis value for a vertical reference line (e.g., a date or category)
​
y
string | number
Y-axis value for a horizontal reference line (e.g., a target or threshold)
​
x1
string | number
Starting x-coordinate for a sloped line
​
y1
string | number
Starting y-coordinate for a sloped line
​
x2
string | number
Ending x-coordinate for a sloped line
​
y2
string | number
Ending y-coordinate for a sloped line
​
color
string
Color of the reference line
​
label_options
options group
Styling options for the labelExample:
label_options={
  position = "above_end"
  align = "left"
  color = "string"
  background_color = "string"
  padding = 0
  fmt = "date"
  hide_value = true
  border = { ... }
  text = { ... }
}
Attributes:
  • position: string
    • Allowed values:
      • above_end
      • above_start
      • above_center
      • below_end
      • below_start
      • below_center
  • align: string
    • Allowed values:
      • left
      • center
      • right
  • color: string
  • background_color: string
  • padding: number
  • fmt: string - Format the label value. Defaults to series or axis fmt.
  • hide_value: boolean
  • border: options group
  • text: options group
​
line_options
options group
Styling options for the line itselfExample:
line_options={
  color = "string"
  width = 0
  type = "solid"
  opacity = 0
}
Attributes:
  • color: string
  • width: number - Width of the line
  • type: string
    • Allowed values:
      • solid
      • dashed
      • dotted
  • opacity: number - Between 0 and 1
​
symbols
options group
Symbol shapes to display at line endpointsAttributes:
  • start: options group
  • end: options group

​
Allowed Parents