Search code examples
echarts

eCharts xAxis labels click event

I am looking for a way to register a click event on xAxis labels. User should be able to click on xAxis label(not on the series) and we should be able to call a function.

Either a direct way or indirect way should be fine.

Solution

  • You can listen almost any events. Just enable the Axis events and filter events by params. Namely, you need to do:

    1. Enable xAxis events:
    option = {
  // ...
  xAxis: {
    // ...
    triggerEvent: true
  }
}
    1. Start to listen click events from the chart instance and check targetType to get all of the label's events:
    myChart.on('click', params => {
  if(params.targetType === 'axisLabel'){
    if(params.value === 'MyLabel #3'){
      console.log("Hello, is it me you're looking for");
      // Do something ...
    }
  }
})

    Also you can use the shorthands and drop the if:

    myChart.on('click', { targetType: 'axisLabel', value: 'Category1' }, params => {
  console.log(params.value);
})


    var myChart = echarts.init(document.getElementById('main'));
  var option = {
      title: {
          text: 'ECharts'
      },
      tooltip: {},
      xAxis: {
          data: ["Category1","Category2","Category3"],
          triggerEvent: true
      },
      yAxis: {},
      series: [{
          name: 'Series',
          type: 'bar',
          data: [5, 20, 36]
      }]
  };

  myChart.setOption(option);
  
  myChart.on('click', params => {
  	if(params.targetType === 'axisLabel'){
      console.log(params.value);    	
    }
  })
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>