CODEWITHSUNDEEP
javascriptechartsapache-echarts
tamersalama
tamersalama

Reputation: 4143

Apache ECharts - Brush with line chart range selection

Setting up a line chart with line series and a horizontal selection brush (lineX) doesn't seem to provide a way of reading the selected range values. Changing the series type to bar or scatter seems to work as expected. I'm wondering if this is a bug or if more configurations are required.

var container = document.getElementById('main');
var chart = echarts.init(container);
chart.setOption({
  xAxis: {
    data: [3, 4, 5]
  },
  yAxis: {
  },
  brush: {
    toolbox: ['lineX'],
    type: 'lineX',
  },
  series: [{
    type: 'line', // changing this to scatter or other types makes the brush selection work
    data: [120, 200, 150]
  }]
});



chart.on('brushSelected', function(params){
  // this shows an empty array - while it should be the range selected
  console.log(params.batch[0].selected[0].dataIndex)
});
#main {
  width: 600px;
  height: 400px;
  border: 1px solid red;
}
<html>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
    <div id="main"></div>
  </body>
</html>

Upvotes: 5

Views: 5462

Answers (2)

Ryan Killeen
Ryan Killeen

Reputation: 130

For anyone coming here in 2024, you're likely searching for the dataZoom property on graph options:

https://echarts.apache.org/en/option.html#dataZoom

Upvotes: 1

liyafei
liyafei

Reputation: 1

Currently, supported brush types include: scatter, bar, candlestick. (Note that parallel contains brush function by itself, which is not provided by brush component.)

https://echarts.apache.org/en/option.html#brush

Upvotes: 0

Related Questions