Search code examples
javascriptchartsechartsbaidu

Echarts : How to call custom function on click of title?


I have created a bar graph using Echart JS, how can I make the click of the title bar customized. I have tried using triggerEvent, but it does not work on click of the title, it works only on statistics.

JSFiddle

var myChart = echarts.init(document.getElementById('main'));

function openTab(){
// Custom code will go here
    return 'https://www.google.com'
}

option = {
  title: {
    x: 'left',
    text: '12 total',
    link : function(){
        openTab();
    }
  },
  grid: {
    left: 50,
    top: 50,
    right: 50,
    bottom: 0
  },
  xAxis: [{
    type: 'category',
    show: false,
    data: ['Test 1', 'Test 2']
  }],
  yAxis: [{
    type: 'value',
    show: false,
    min: 0
  }],
  series: [{
    type: 'bar',
    itemStyle: {
      normal: {
        color: '#3b4563',
        label: {
          show: true,
          position: 'top',
          formatter: '{c} {b}'
        }
      }
    },
    data: ['2', '10']
  }]
};



myChart.setOption(option);

I have used https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-bar


Solution

  • This is possible with the latest version of echart js.

    Version : 4.2.0-rc.2

    Title has now triggerEvent option :

    title : {
                text: 'Test titlr',
                triggerEvent: true
            },