Skip to main content

​
Goal line

A goal line displays a target value as a horizontal line across your chart. Use it to show targets, thresholds or benchmarks.
​
referenceLines.goalLine
object
Goal line configuration.
​
goalLine.target
number
required
Goal target value along the y-axis. This is where the horizontal line will be drawn.
​
goalLine.marker
string | number
Optional marker position on the x-axis. Use this to indicate when the goal applies or when it was set.
​
goalLine.label
string
Custom label for the goal line. Defaults to “Goal” if not provided.
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: 
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.
​
referenceLines.trendline
TrendlineType
The type of trendline to display. Each type fits a different mathematical model to your data.

​
Trendline types

​
linear
trendline
Straight line. Best for data that moves up or down at a steady pace.Use when: Your data shows consistent growth or decline
​
loess
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
​
exponential
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
​
logarithmic
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
​
quadratic
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
​
power
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
​
polynomial
trendline
Flexible curved line that can have several peaks and valleys.Use when: Your data has multiple turning points

​
Using trendlines

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.
​
referenceLines.averageLine
object
Average line configuration.
​
averageLine.columnKey
string
required
Column key for the series to calculate the average from. Must match a column key from your data.
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)
    }
  }
};