Interface: LineOptions | Chart.js
Description: Open source HTML5 Charts for your website

# # Interface: LineOptions

## # Hierarchy

- `CommonElementOptions`

  ↳ `LineOptions`

## # Properties

### # backgroundColor

• backgroundColor: `Color`

#### # Inherited from

CommonElementOptions.backgroundColor

#### # Defined in

index.esm.d.ts:1696
(opens new window)

### # borderCapStyle

• borderCapStyle: `CanvasLineCap`

Line cap style. See MDN.

`default` 'butt'

#### # Defined in

index.esm.d.ts:1779
(opens new window)

### # borderColor

• borderColor: `Color`

#### # Inherited from

CommonElementOptions.borderColor

#### # Defined in

index.esm.d.ts:1695
(opens new window)

### # borderDash

• borderDash: `number`[]

Line dash. See MDN.

`default` []

#### # Defined in

index.esm.d.ts:1784
(opens new window)

### # borderDashOffset

• borderDashOffset: `number`

Line dash offset. See MDN.

`default` 0.0

#### # Defined in

index.esm.d.ts:1789
(opens new window)

### # borderJoinStyle

• borderJoinStyle: `CanvasLineJoin`

Line join style. See MDN.

`default` 'miter'

#### # Defined in

index.esm.d.ts:1794
(opens new window)

### # borderWidth

• borderWidth: `number`

#### # Inherited from

CommonElementOptions.borderWidth

#### # Defined in

index.esm.d.ts:1694
(opens new window)

### # capBezierPoints

• capBezierPoints: `boolean`

true to keep Bézier control inside the chart, false for no restriction.

`default` true

#### # Defined in

index.esm.d.ts:1799
(opens new window)

### # cubicInterpolationMode

• cubicInterpolationMode: `"default"` | `"monotone"`

Interpolation mode to apply.

`default` 'default'

#### # Defined in

index.esm.d.ts:1804
(opens new window)

### # fill

• fill: `FillTarget` | `ComplexFillTarget`

Both line and radar charts support a fill option on the dataset object which can be used to create area between two datasets or a dataset and a boundary, i.e. the scale origin, start or end

#### # Defined in

index.esm.d.ts:1818
(opens new window)

### # segment

• segment: `Object`

#### # Type declaration

Name | Type
--- | ---
`backgroundColor` | `Scriptable`<`Color`, `ScriptableLineSegmentContext`>
`borderCapStyle` | `Scriptable`<`CanvasLineCap`, `ScriptableLineSegmentContext`>
`borderColor` | `Scriptable`<`Color`, `ScriptableLineSegmentContext`>
`borderDash` | `Scriptable`<`number`[], `ScriptableLineSegmentContext`>
`borderDashOffset` | `Scriptable`<`number`, `ScriptableLineSegmentContext`>
`borderJoinStyle` | `Scriptable`<`CanvasLineJoin`, `ScriptableLineSegmentContext`>
`borderWidth` | `Scriptable`<`number`, `ScriptableLineSegmentContext`>

#### # Defined in

index.esm.d.ts:1824
(opens new window)

### # spanGaps

• spanGaps: `number` | `boolean`

If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used.

#### # Defined in

index.esm.d.ts:1822
(opens new window)

### # stepped

• stepped: `boolean` | `"middle"` | `"before"` | `"after"`

true to show the line as a stepped line (tension will be ignored).

`default` false

#### # Defined in

index.esm.d.ts:1814
(opens new window)

### # tension

• tension: `number`

Bézier curve tension (0 for no Bézier curves).

`default` 0

#### # Defined in

index.esm.d.ts:1809
(opens new window)