selection


chart: {
  selection: {
    enabled: true,
    type: 'x',
    fill: {
      color: '#24292e',
      opacity: 0.1
    },
    stroke: {
      width: 1,
      dashArray: 3,
      color: '#24292e',
      opacity: 0.4
    },
    xaxis: {
      min: undefined,
      max: undefined
    },
    yaxis: {
      min: undefined,
      max: undefined
    }
  }
}

chart

selection

enabled: Boolean

To allow selection in axis charts. Selection will not be enabled for category x-axis charts, but only for charts having numeric x-axis. For eg., timeline charts.

type: String

Allow selection either on both x-axis, y-axis or on both axis.
Available options

fill

color: Color

Background color of the selection rect which is drawn when user drags on the chart.

opacity: Number

Opacity of background color of the selection rect.

stroke

width: Number

Border thickness of the selection rect.

dashArray: Number

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

color: Color

Colors of selection border.

opacity: Number

Opacity of selection border.

xaxis

min: Number

Start value of x-axis. For a time-series chart, a timestamp should be provided

max: Number

End value of x-axis. For a time-series chart, a timestamp should be provided.

yaxis

min: Number

Start value of y-axis. (if used in a multiple y-axes chart, this considers the 1st y-axis).

max: Number

End value of y-axis (if used in a multiple y-axes chart, this considers the 1st y-axis).

Why Choose ApexCharts

selection

Stay Updated