0

In this line echart I'd like each symbol (The black dot) to turn white with a blue border when the symbol is hovered over.

This is the configuration for the chart.

          data: this.data,
          silent: true,
          sampling: 'average',
          symbolSize: 12,
          symbol: 'circle',
          type: 'line',
          itemStyle: {
            color: 'rgba(0,0,0, 0.6)',
          },
          lineStyle: {
            width: 5,
            color: 'rgba(0,0,0,0.4)',
          },

The itemStyle controls the color of the symbol. How do we add a hover effect to that?

I thought adding emphasis would do it and so I tried both of these configurations:

Item Style Nested in Emphasis


          emphasis: {
            itemStyle: {
              color: 'white',
              borderColor: 'blue',
              borderWidth: 2,
            },
          },

Emphasis Nested in Item Style


          itemStyle: {
            color: 'rgba(0,0,0, 0.6)',
            emphasis: {
              color: 'white',
              borderColor: 'blue',
              borderWidth: 2,
            },
          },

But neither has any effect.

Ole
  • 41,793
  • 59
  • 191
  • 359
  • 1
    The first version works, [stackblitz fork](https://stackblitz.com/edit/stackblitz-starters-sagxtu?file=src%2Fecharts.component.ts), but was inhibited by `silent: true`, which, in general, means that mouse interaction is to be ignored; funnily enough, this time *I* don't find it listed among the properties of `series:[{type: line, ....}]`, but it's clearly working – kikon Jun 19 '23 at 18:14
  • 1
    Oh yeah ... I just noticed that as well ... I made the change to the original question Stackblitz ...So I changed it back, forked it, and created an answer with what you are indicating ... – Ole Jun 19 '23 at 18:22

1 Answers1

1

OK ... Figured it out ... The silent option was set to true. When that's the case the tooltip does not get displayed and the emphasis is switched off.

This is a working demo with the tooltip and the emphasis.

Ole
  • 41,793
  • 59
  • 191
  • 359