brush

  
  chart: {
      brush: {
        enabled: false,
        target: undefined,
        autoScaleYaxis: false
      }
  }

chart

brush:

enabled: Boolean

Turn on this option to enable brush chart options
After you enable brush, you need to set target chart ID to allow the brush chart to capture events on the target chart.

target: String

Chart ID of the target chart to sync the brush chart and the target chart. If you have an array of multiple chart IDs, use targets property instead.

autoScaleYaxis: Boolean

If set to true, the Y-axis will automatically scale based on the visible min/max range.

Note: One important configuration to set in a brush chart is the chart.selection option. The range which you set in chart.selection will act as brush in the brush chart

Here’s an example code snippet how brush/target works


var targetChartOptions = {
  chart: {
    id: 'target-chart',
    type: 'line',
    height: 230,
    toolbar: {
      autoSelected: 'pan',
      show: false
    }
  },
}

var brushChartOptions = {
  chart: {
    height: 130,
    type: 'area',
    brush:{
      target: 'chart2',
      enabled: true
    },
    selection: {
      xaxis: {
        min: new Date('19 Jun 2017').getTime(),
        max: new Date('14 Aug 2017').getTime()
      }
    },       
  },
}

And, here you will find a complete example of brush charts usage Brush chart demo.

Why Choose ApexCharts

brush

Stay Updated