Adding a highlight style to EChart Items?

Question

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.

Answer 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.