DEV Community

FlyingAndFly
FlyingAndFly

Posted on

What are the methods for formatting VChart chart labels?

Description

In the VChart bar chart, the default display is the label of the corresponding value of the bar. I want to display something like 'x-axis name: y value' . What are the ways to customize the label display?

Solution

There are two recommended configuration methods:

  1. Configure the formatting function through label.formatMethod.
    1. The function parameter is (text: string | string [], data?: any) ,text is the default displayed text, and data is the related data.
    2. The return value of the function can be a string or a string array. Among them, the string array will be displayed as a newline by default.
    3. If you want to configure it as rich text, the return value is the rich text configuration object.
label: {
    formatMethod:(value, data) => `${data.name}: ${value}`
}
Enter fullscreen mode Exit fullscreen mode

Image description

  1. Configure the template string through label.formatter.
label: {
   formatter: `{name} : {value}`
}
Enter fullscreen mode Exit fullscreen mode

Image description

Related Documents

Top comments (0)