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

# Reference lines

## Goal line

A goal line displays a target value as a horizontal line across your chart. Use it to show targets, thresholds or benchmarks.

<ParamField path="referenceLines.goalLine" type="object" optional>
  Goal line configuration.
</ParamField>

<ParamField path="goalLine.target" type="number" required>
  Goal target value along the y-axis. This is where the horizontal line will be drawn.
</ParamField>

<ParamField path="goalLine.marker" type="string | number" optional>
  Optional marker position on the x-axis. Use this to indicate when the goal applies or when it was set.
</ParamField>

<ParamField path="goalLine.label" type="string" optional>
  Custom label for the goal line. Defaults to "Goal" if not provided.
</ParamField>

```tsx theme={null}
const config: GraphConfig = {
  type: 'line',
  data: {
    columns: [
      { key: 'month', label: 'Month' },
      { key: 'revenue', label: 'Revenue' },
    ],
    rows: [
      { month: 'Jan', revenue: 850 },
      { month: 'Feb', revenue: 920 },
      { month: 'Mar', revenue: 1050 },
      { month: 'Apr', revenue: 1100 },
    ],
  },
  referenceLines: {
    goalLine: {
      target: 1000,
      label: 'Monthly target',
    },
  },
};
```

### Goal line with marker

Add a marker to show when a goal was set or when it changes:

```tsx theme={null}
referenceLines: {
  goalLine: {
    target: 1000,
    marker: 'Mar',  // Mark the x-position where goal applies
    label: 'Q2 target'
  }
}
```

## Trendline

A trendline shows the general direction and pattern in your data using statistical methods. Choose from multiple trendline types depending on your data characteristics.

<ParamField path="referenceLines.trendline" type="TrendlineType" optional>
  The type of trendline to display. Each type fits a different mathematical model to your data.
</ParamField>

### Trendline types

<ParamField path="linear" type="trendline">
  Straight line. Best for data that moves up or down at a steady pace. Use when: Your data shows consistent growth or
  decline
</ParamField>

<ParamField path="loess" type="trendline">
  Smooth line that gently follows the overall pattern in the data. Good for bumpy or noisy trends. Use when: You want to
  see the general direction without being distracted by short-term volatility
</ParamField>

<ParamField path="exponential" type="trendline">
  Line that bends upward or downward more and more over time. Good for growth rates or compounding changes. Use when:
  Your data is accelerating or decelerating exponentially
</ParamField>

<ParamField path="logarithmic" type="trendline">
  Line that changes quickly at first, then levels off. Good for patterns with diminishing returns. Use when: Your data
  grows rapidly initially then plateaus
</ParamField>

<ParamField path="quadratic" type="trendline">
  Gently curved line with one clear peak or valley. Good for data that changes direction once. Use when: Your data has a
  single turning point
</ParamField>

<ParamField path="power" type="trendline">
  Curved line for scaling relationships where one value grows as a power of another (e.g., area vs radius). Use when:
  You're showing power law relationships
</ParamField>

<ParamField path="polynomial" type="trendline">
  Flexible curved line that can have several peaks and valleys. Use when: Your data has multiple turning points
</ParamField>

### Using trendlines

```tsx theme={null}
const config: GraphConfig = {
  type: 'scatter',
  data: {
    /* ... */
  },
  referenceLines: {
    trendline: 'linear', // Add a linear trendline
  },
};
```

## Average line

An average line shows the arithmetic mean of a data series as a horizontal line. Useful for identifying values that are above or below average.

<ParamField path="referenceLines.averageLine" type="object" optional>
  Average line configuration.
</ParamField>

<ParamField path="averageLine.columnKey" type="string" required>
  Column key for the series to calculate the average from. Must match a column key from your data.
</ParamField>

```tsx theme={null}
const config: GraphConfig = {
  type: 'column',
  data: {
    columns: [
      { key: 'product', label: 'Product' },
      { key: 'sales', label: 'Sales' },
    ],
    rows: [
      { product: 'A', sales: 100 },
      { product: 'B', sales: 150 },
      { product: 'C', sales: 120 },
      { product: 'D', sales: 180 },
    ],
  },
  referenceLines: {
    averageLine: {
      columnKey: 'sales', // Show average of sales values (137.5)
    },
  },
};
```