stroke

Configuration Structure

stroke: {
  show: boolean,
  curve: Array,
  lineCap: 'butt' | 'square' | 'round',
  colors: any[] | string[],
  width: number | number[],
  dashArray: number | number[],
  fill: ApexFill,
    colors: any[],
    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

Creates dashes in borders of svg path. Higher number creates more space between dashes in the border.