VChart 1.13.0
Tutorials
Contributing
Options
API
FAQ
Themes 🌼
Changelogs
Online Customization
Playground
VChart Story Teller

Not only an out-of-the-box multi-terminal chart library, but also a vivid and flexible data storyteller.

VTable Checkered Artist

Not only a high-performance multi-dimensional data analysis form, but also a grid artist created between rows and columns.

VGrammar Data Magician

It is not only a visual grammar that generates thousands of charts, but also a data magician who turns boring into magic.

VRender Visual Rendering

Not only a visual rendering engine with rich functions, but also a handy pen.

VMind Smart Visualization Suit

Not just automatic, but also fantastic.

VStory Relationship Explorer plus

It is not only a fully functional graph visualization library, but also an explorer of data relationships.

!!!###!!!title=117-How to modify the style of the legend element when the mouse is hovering over the legend——VisActor/VChart FAQ documents!!!###!!!

How to realize that when the mouse hovers over the legend, the circular legend will be highlighted in a circle and the gray background of the rectangle will be removed?

Question Description

How to configure the style of the legend when the mouse hovers, hoping to replace the gray background with a larger graphic.

Solution

The legend of VChart provides the style configuration of the graph when it is hovered by the mouse, and the background can also be turned off.

  • item.background.visible can be used to turn off or turn on the background of the legend item
  • item.shape.state.selectedHover can be used to set the style of the selected shape when it is hovered by the mouse.
  • item.shape.state.unSelectedHover can be used to set the style of the selected shape when it is hovered by the mouse.

The graphic style configuration properties of VChart are unified. Configuring size in selectedHover and unSelectedHover at the same time can ensure that all legend items become larger when hovered by the mouse.

Code Example

Quote