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

# Type options

## Overview

The `options` property contains chart type-specific settings. Different options are available depending on which chart type you're using.

```tsx theme={null}
const config: GraphConfig = {
  type: 'line',
  options: {
    isSmoothLine: true,
    showPoints: true,
  },
};
```

## Line chart options

### Smooth lines

<ParamField path="isSmoothLine" type="boolean" default="false">
  Whether to use smooth (curved) lines for line charts. When `true`, lines are drawn with curves. When `false`, lines
  are straight between data points.
</ParamField>

```tsx theme={null}
const config: GraphConfig = {
  type: 'line',
  options: {
    isSmoothLine: true,
  },
};
```

### Line thickness

<ParamField path="lineThickness" type="number | 'auto'" default="auto">
  Line thickness in pixels. Set to `'auto'` to automatically determine the appropriate thickness based on chart size, or
  provide a specific pixel value.
</ParamField>

```tsx theme={null}
const config: GraphConfig = {
  type: 'line',
  options: {
    lineThickness: 3, // 3px thick lines
  },
};
```

### Show points

<ParamField path="showPoints" type="boolean" default="false">
  Whether to show data point markers on the line. Useful for emphasising individual data points or when you have sparse
  data.
</ParamField>

```tsx theme={null}
const config: GraphConfig = {
  type: 'line',
  options: {
    showPoints: true,
  },
};
```

### Missing values

<ParamField path="missingValues" type="'gap' | 'connect' | 'zero'" default="gap">
  How to handle missing values (nulls) in line charts: - `'gap'` - Break the line where values are missing - `'connect'`

  * Connect the line across missing values - `'zero'` - Treat missing values as zero
</ParamField>

```tsx theme={null}
const config: GraphConfig = {
  type: 'line',
  data: {
    columns: [
      { key: 'month', label: 'Month' },
      { key: 'sales', label: 'Sales' },
    ],
    rows: [
      { month: 'Jan', sales: 100 },
      { month: 'Feb', sales: null }, // Missing data
      { month: 'Mar', sales: 150 },
    ],
  },
  options: {
    missingValues: 'connect', // Draw line across the gap
  },
};
```

## Bar and column chart options

### Sort bars

<ParamField path="sortBars" type="boolean" default="false">
  Whether to sort bars in descending order by value. Only applies to categorical bar and column charts with a single
  series.
</ParamField>

```tsx theme={null}
const config: GraphConfig = {
  type: 'bar',
  options: {
    sortBars: true, // Sort from highest to lowest
  },
};
```

## Scatter plot options

### Point size

<ParamField path="pointSize" type="number | 'auto'" default="auto">
  Custom point size for scatter plots in pixels. Set to `'auto'` to automatically determine the appropriate size, or
  provide a specific pixel value.
</ParamField>

```tsx theme={null}
const config: GraphConfig = {
  type: 'scatter',
  options: {
    pointSize: 8, // 8px diameter points
  },
};
```

## Combo chart options

### Combo type

<ParamField path="comboType" type="'grouped-bars' | 'stacked-bars' | 'lines'" default="grouped-bars">
  Determines the type of combo plot to show: - `'grouped-bars'` - Display series as grouped bars alongside each other -
  `'stacked-bars'` - Stack series bars on top of each other - `'lines'` - Display series as lines
</ParamField>

```tsx theme={null}
const config: GraphConfig = {
  type: 'combo',
  options: {
    comboType: 'lines', // Show all series as lines
  },
};
```

## Pie and donut chart options

### Pie total position

<ParamField path="pieTotalPosition" type="'center' | 'outside'" default="outside">
  Where to show the sum of all values in a pie or donut chart: - `'center'` - Show the total in the center of the chart
  (particularly useful for donut charts) - `'outside'` - Show the total outside the chart area
</ParamField>

```tsx theme={null}
const config: GraphConfig = {
  type: 'donut',
  options: {
    pieTotalPosition: 'center', // Show total in donut center
  },
};
```

## Combining options

You can combine multiple options for the same chart type:

```tsx theme={null}
const config: GraphConfig = {
  type: 'line',
  options: {
    isSmoothLine: true,
    showPoints: true,
    lineThickness: 2,
    missingValues: 'connect',
  },
};
```

<Note>
  Options that don't apply to your current chart type are ignored. For example, setting `isSmoothLine` on a bar chart
  has no effect.
</Note>