chart.selection

Configuration Structure

chart: {
  enabled: boolean,
  type: string,
  fill: { ... },
    color: string,
    opacity: number,
  stroke: { ... },
    width: number,
    color: string,
    opacity: number,
    dashArray: number,
  xaxis: { ... },
    min: number,
    max: number,
  yaxis: { ... },
    min: number,
    max: number,
}

The selection options let users draw a rectangle over the chart to highlight or capture a range, commonly used to drive a second chart or a brush. You can restrict selection to an axis, style the selection rectangle, and preset the initial selected range. It is part of the chart configuration.

selection

enabled

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

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

  • x
  • y
  • xy

fill

color

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

opacity

Opacity of background color of the selection rect.

stroke

width

Border thickness of the selection rect.

dashArray

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

color

Colors of selection border.

opacity

Opacity of selection border.

xaxis

min

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

max

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

yaxis

min

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

max

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