🔧 In vchart, how do I set the legend not to follow the gradient color and draw a rounded rectangle legend?

🕛 Zeit seit Veröffentlichung: 152 Tage, 1 Stunden 48 Minuten
📆 Veröffentlicht am: 08.05.2024 um 09:50 Uhr
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

Question Title

In vchart charts, how do I set the legend not to follow the gradient color and draw a rounded rectangle legend?

Question Description

I am using vchart to make charts and have encountered two issues that I would like to ask everyone. My area chart style has been adjusted to a gradient color, but I don't want the legend color to follow the gradient of the area chart, how should I set it?

In addition, I did not find in the information that the legend shape provides a rounded rectangle option, is there any other plan to implement the drawing of rounded rectangles?

Solution

Hello, these two problems can be solved through configuration.

If you don't want the legend color to follow the gradient of the area chart, you can change the color of the main mark of the series by configuring the seriesMark.
seriesMark: 'point',
As for how to draw legends of rounded rectangles, you can set the symbolType graphic attribute of legend graphics by configuring it. The specific setting content is as follows:
item:{
shape:{
style:{
symbolType:"M 462 282 c 0 99.405 -80.595 180 -180 180 h -540 c -99.405 0 -180 -80.595 -180 -180 v -540 c 0 -99.405 80.595 -180 180 -180 h 540 c 99.405 0 180 80.595 180 180 v 540 z"
}
}
}

Result Show

Online demo: https://codesandbox.io/p/sandbox/line-chart-hover-forked-t74cvw?file=%2Fsrc%2Findex.ts%3A66%2C13

Related Documentation

• VChart documentation symbolType: https://visactor.bytedance.net/vchart/option/barChart-legends-discrete#item.shape.style.symbolType
• VChart documentation seriesMark: https://visactor.bytedance.net/vchart/option/lineChart#seriesMark('point'|'line')%20=%20'line'

...