Home > Docs > stroke

stroke

Configuration Structure

stroke: {
  show: boolean,
  curve: Array,
  lineCap: 'butt' | 'square' | 'round',
  colors: string[],
  width: number | number[],
  dashArray: ApexDashPattern | Array<number | ...,
  fill: ApexFill,
    colors: string[],
    opacity: number | number[],
    type: string | string[],
    gradient: { ... },
      shade: string,
      type: string,
      shadeIntensity: number,
      gradientToColors: string[],
      inverseColors: boolean,
      opacityFrom: number | number[],
      opacityTo: number | number[],
      stops: number[],
      colorStops: Array,
    image: { ... },
      src: string | string[],
      width: number,
      height: number,
    pattern: { ... },
      style: string | string[],
      width: number,
      height: number,
      strokeWidth: number,
}

show

Default: true

To show or hide path-stroke / line

curve

Default: 'smooth'

In line / area charts, whether to draw smooth lines or straight lines.

Available Options:

  • straight: connect the points in straight lines.
  • smooth: Uses the simplest smoothing function which produces flowing lines that are accurate
  • monotoneCubic: Connects the points to create a monotone cubic spline.
  • stepline: points are connected by horizontal and vertical line segments, looking like steps of a staircase.
  • linestep: Another alternative version of stepline

You can also pass an array in stroke.curve, where each index corresponds to the series-index in multi-series charts.

stroke: {
  curve: 'smooth',
  // OR provide an array
  curve: ['straight', 'smooth', 'monotoneCubic', 'stepline']
}

lineCap

Default: 'butt'

For setting the starting and ending points of stroke.

Available Options:

  • butt: ends the stroke with a 90-degree angle
  • square: similar to butt except that it extends the stroke beyond the length of the path
  • round: ends the path-stroke with a radius that smooths out the start and end points

colors

Default: undefined

Colors to fill the border for paths.

width

Default: 2

Sets the width of border for svg path.

dashArray

Default: 0

Dashes the series' lines. A number draws dashes and gaps of that length, and 0 draws solid.

Since 8.5.0 a value can also be a full dash pattern: a string of lengths such as '8 3 2 3' (or '8,3,2,3'), or an array such as [8, 3, 2, 3]. A list with an odd number of entries repeats to an even length, as SVG stroke-dasharray does, so '8 3 2' reads as '8 3 2 8 3 2'.

A single value applies to every series. A top-level array is one value per series, in series order, and each entry may itself be a pattern. That makes the two array forms easy to mix up:

stroke: { dashArray: '8 3 2 3' }       // every series dash-dot
stroke: { dashArray: [8, 3, 2, 3] }    // four series, dashed 8, 3, 2 and 3
stroke: { dashArray: [0, [8, 3, 2, 3]] } // first solid, second dash-dot

For round dots, use a zero-length dash with a round cap: dashArray: '0 6' with lineCap: 'round'.