Title
How to configure Legend Shape as a rectangle with rounded corners?
Description
As shown below:
Solution
Support configuration as'rectRound 'type
- Tooltip:
shapeType:"rectRound"
tooltip: {
mark: {
content: [
{
shapeType: 'rectRound',
key: datum => datum['type'],
value: datum => datum['value'] + '%'
}
]
}
}
- Legend:
legends: {
visible: true,
orient: 'right',
item: {
width: '15%',
shape: {
style: {
symbolType: 'rectRound'
}
}
}
},
Code Example
const spec = {
type: 'pie',
data: [
{
id: 'pie',
values: [
{ value: 10, category: 'One' },
{ value: 9, category: 'Two' },
{ value: 6, category: 'Three' },
{ value: 5, category: 'Four' },
{ value: 4, category: 'Five' },
{ value: 3, category: 'Six' },
{ value: 1, category: 'Seven' }
]
}
],
categoryField: 'category',
valueField: 'value',
legends: {
visible: true,
orient: 'right',
item: {
width: '15%',
shape: {
style: {
symbolType: 'rectRound'
}
}
}
},
tooltip: {
mark: {
content: [
{
shapeType: 'rectRound',
key: datum => datum['type'],
value: datum => datum['value'] + '%'
}
]
}
}
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
Result
Related Documents
- Tutorials: https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Legend , https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Tooltip
- API:https://visactor.bytedance.net/vchart/option/barChart#tooltip.dimension.content,https://visactor.bytedance.net/vchart/option/barChart-legends-discrete#item.shape.style.symbolType
- Github:https://github.com/VisActor/VChart/
Top comments (0)