Skip to main content

Line style

You can style lines by setting properties on the data.dataset object that defines your line series. See Chart.js line styling documentation for full details.

The following are useful styling properties that are available on the line object:

Properties of datasets used to customize line style

backgroundColorThe color of area filled under the chart.
borderCapStyleCap style of the line. See MDN.
borderColorThe line color.
borderDashLength and spacing of line dashes. Use this to create dashed or dotted lines. For example, a simple dashed line would be [2, 2]. See MDN.
borderDashOffsetOffset for line dashes. See MDN.
borderJoinStyleLine joint style. See MDN.
borderWidthThe line width, in pixels.
clipHow to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side as an object with left, right, top, bottom
fillSet true to fill in area under the chart.
lineTensionBezier curve tension of the line. Set to 0 to draw straightlines. Set 0.4 for line smoothing.
showLineIf false, the line is not drawn for this dataset.
spanGapsIf 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.
steppedLineIf true, draw line as a stepped line. Other valid values include before for step-before interpolation, after for step-after interpolation, and middle for step-middle interpolation.


Here's an example chart that uses some line properties: