CODEWITHSUNDEEP
javascriptecharts
walderich
walderich

Reputation: 626

Remove tooltip hover effect on 'axis' trigger

I have a stacked EChart graph with light area colors and a tooltip trigger set to 'axis':

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

option = {
  tooltip: { trigger: 'axis', },
  legend: { data: ['A', 'B', 'C'] },
  xAxis: {
    type: 'category',
    data: [0, 1, 2, 3, 4, 5, 6, 7, 8]
  },
  yAxis: { type: 'value' },
  series: [ {
      name: 'C',
      type: 'line',
      areaStyle: { color: '#fdd', },
      stack: 'C',
      data: [ 1.6, 1.6, 1.6, 1.6, 1.6, 1.6, 0.7, 0.8, 0.8 ]
    }, {
      name: 'A',
      type: 'line',
      areaStyle: { color: '#ffd' },
      stack: 'C',
      data: [ 2, 1.6, 1.6, 1.6, 1.6, 1.6, 2.4, 2.4, 2.4 ]
    }, {
      name: 'B',
      type: 'line',
      areaStyle: { color: '#dfd' },
      stack: 'C',
      data: [ 2, 1.9, 2.1, 2.3, 2.3, 2.5, 2.1, 2.1, 2.1 ]
    }
  ],
  color: [ '#d34', '#fc1', '#3a4' ],
  grid: { left: 20, bottom: 20, right: 10, top: 40},
};

myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<div id="chart" style="width: 100%;height:180px;"></div>

After updating the ECharts version to the current release, hovering over the axis now fades the area colors, so they are almost not visible anymore.

I already tried different combinations of silence: true and emphasis settings and searched to online documentation, but I wasn't able to change the tooltip hover effect.

How can I disable the tooltip hover effect, so that the line and area colors are not changed?

Upvotes: 3

Views: 2314

Answers (2)

omerfarukdogan
omerfarukdogan

Reputation: 869

To disable the emphasis state completely, use emphasis.disabled option:

options = {
  ...
  emphasis: {
    disabled: true,
  },
}

Upvotes: 0

lissettdm
lissettdm

Reputation: 13078

Use emphasis to override the highlight style of the graphic. See itemStyle, lineStyle and areaStyle

  series: [ {
      name: 'C',
      type: 'line',
      areaStyle: { color: '#fdd', opacity: 1},
      stack: 'C',
      data: [ 1.6, 1.6, 1.6, 1.6, 1.6, 1.6, 0.7, 0.8, 0.8 ],
      emphasis : {
        areaStyle: { //--> to avoid the fade effect, set the same color
          color: '#fdd'
        }
      }
    }
]

Other option is to change silent: true to disable triggering and responding to mouse events:

series: [{
      name: 'C',
      type: 'line',
      areaStyle: { color: '#fdd', opacity: 1},
      stack: 'C',
      data: [ 1.6, 1.6, 1.6, 1.6, 1.6, 1.6, 0.7, 0.8, 0.8 ],
      silent: true //--> here
    }
  ...
]

Upvotes: 6

Related Questions