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=184-How to customize the shape and text style of the legend——VisActor/VChart FAQ documents!!!###!!!

How to customize the shape and text style of the legend?

Problem Description

Please tell me how to customize the shape of the legend item and modify the style of the text to achieve a legend style similar to the following figure:

Solution

Different chart library solutions have different solutions. The following is an introduction to how to configure using VChart. Currently, to achieve the display effect of the above figure with VChart, you need:

  • Customize data, mainly to add a numerical field to the legend item data, so that the numerical value can be displayed on the legend item, and the style of the numerical value can also be configured through the item.value attribute
  • In VChart, the pie chart legend shape is circular by default, but if you want to configure it into other shapes, you can configure it directly through item.shape.style.symbolType

Code Example