CODEWITHSUNDEEP
echarts
user1012525
user1012525

Reputation: 148

ECHARTS: Display custom tooltip when hovering the Line

In a standard simple line chart, with line and symbols, setting the tooltip option means that whenever you hover over a symbol it will display a box with the name of the line and the symbol value.

What I actually want is to display this tooltip box when I'm hovering over the line itself (and not only when I'm hovering over the symbol).

Also, I would like this tooltip to be a custom tooltip with just the name of the line, with symbols disabled.

Upvotes: 3

Views: 9581

Answers (2)

Abhijit Chikane
Abhijit Chikane

Reputation: 39

just add below tooltip configuration then it should work

tooltip: {
      type: 'item'
}


options: EChartsOption = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
      },
    ],
    tooltip: {
      type: 'item'
    }
  };

Upvotes: 1

A mere dev
A mere dev

Reputation: 1790

To make hovering over the line itself work, you'll have to set triggerLineEvent to true:

series: [
  {
    ... // your line serie config
    triggerLineEvent: true,
  },

Then you can use Echart's mouse event to manage mouse hovering the line :

var tooltipDisplay = ""

// Called when your mouse hover an object (params : the object you hover)
myChart.on('mouseover', function(params) {
  // Check if it's hovering a line
  if(params.componentSubType == "line"){
    // get hovered line series name
    tooltipDisplay = params.seriesName
  }
});

//Called when your mouse leaves an object (params : the object you leave)
myChart.on('mouseout', function(params) {
  tooltipDisplay = ''
});

Then, to display that in the tooltip :

tooltip: [
  {
    ... // your tooltip config
    formatter : (params) => {
      return tooltipDisplay;
    }
  },

Full example :

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

var tooltipDisplay = ""

option = {
  grid: {
     top: '10px',
     bottom: '40px',
     left: '100px',
     right: '100px',
  },
  tooltip: {
    trigger: 'axis',
    formatter : (params) => {
      return tooltipDisplay;
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210],
      showSymbol: false,
      triggerLineEvent: true,
    },
    {
      name: 'Search Engine',
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      showSymbol: false,
      triggerLineEvent: true
    }
  ]
};

myChart.on('mouseover', function(params) {
  if(params.componentSubType == "line"){
    tooltipDisplay = params.seriesName
  }
});

myChart.on('mouseout', function(params) {
  tooltipDisplay = ''
});

myChart .setOption(option)
<html>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <div id="main" style="width: 450px; height:170px;"></div>
  </body>
</html>

Upvotes: 8

Related Questions