How to configure the outer border of the primitive when hovering in a bar chart?
Siji Chen
Posted on May 12, 2024
Title
How to configure the outer border of the primitive when hovering in a bar chart?
Description
How to configure the outer border effect displayed when hovering on a bar chart? I hope that when hovering, there will be an outer border with a certain gap from the primitive.
Solution
You can configure the lineWidth
of border thickness, stroke
of border color, and distance
of gap between the border in bar.state.hover.outerBorder
.
Code Example
const spec = {
type: 'bar',
data: [
{
id: 'barData',
values: [
{ month: 'Monday', sales: 22 },
{ month: 'Tuesday', sales: 13 },
{ month: 'Wednesday', sales: 25 },
{ month: 'Thursday', sales: 29 },
{ month: 'Friday', sales: 38 }
]
}
],
xField: 'month',
yField: 'sales',
bar:{
state:{
hover:{
zIndex:400,
outerBorder:{
lineWidth:1, // borderSize
stroke:'#4e83fd', // borderColor
distance: 3 // borderSpacing
}
}
}
}
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
Results
Online demo:https://codesandbox.io/p/sandbox/hover-border-wq6lsr?file=%2Fsrc%2Findex.ts%3A23%2C23
Related Documentation
Bar Chart Demo:https://www.visactor.io/vchart/demo/bar-chart/basic-column
Bar Chart Toturial:https://www.visactor.io/vchart/guide/tutorial\_docs/Chart\_Types/Bar
github:https://github.com/VisActor/VChart
Posted on May 12, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 29, 2024