VChart 2.0.19
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 Data Story Framework

Intelligent visual storytelling, data story creation framework.

VSeed Data Seed

VSeed, an elegant data composer, transforming complexity into simplicity.

!!!###!!!title=200-When hovering over a donut chart, how to configure the style of donut chart——VisActor/VChart FAQ documents!!!###!!!

When hovering over a donut chart, how to configure the style of donut chart?

Question Description

In the interaction of a donut chart, how can the border color, border thickness, radius, and fill opacity of the sectors be changed when the pointer hovers over them? Additionally, how should the styles of other arc marks, i.e., the ones not being hovered over, be handled?

Solution

The VChart already provides corresponding functions for this. VChart abstracts various common interactions into mark state. The mark states in VChart are divided into the following categories:

  • default: Default state, the initial state of the graphic element.
  • hover: Pointer hover state, the state of the graphic element when it is hovered over by the mouse pointer.
  • hover_reverse: Non-pointer hover state, the state of other graphic elements when a graphic element enters the hover state.
  • selected: Selected state, the state of the graphic element when it is selected.
  • selected_reverse: Non-selected state, the state of other graphic elements when a graphic element enters the selected state.
  • dimension_hover: Dimension hover state, the state when the mouse pointer hovers within a certain x axis area.
  • dimension_hover_reverse: Non-dimensional hover state, the state of other graphic elements when a graphic element enters the dimension_hover state.

If you want to change the style of pie mark when hovering over a donut chart, you can configure the mark's hover state in the pie configuration.

Reference documentation: State of Mark

Code Example

In the following example, the pie.state configuration includes four states:

  • hover: The state of the mark when the pointer hovers over it. It displays a border, reduces the fill opacity, and expands the outer radius.
  • hover_reverse: The state of other marks when they are not being hovered over. It reduces the outer radius.
  • selected: The state of the mark when it is selected by the pointer. It enlarges both the inner and outer radii.
  • selected_reverse: The state of other marks when they are not selected. It reduces the fill opacity.

Quote