Can the tip displayed above be configured to modify the background color and text color when hovering a long label?
SimaQ
Posted on June 26, 2024
Title
Can the tip displayed above be configured to modify the background color and text color when hovering a long label?
Description
Can the tip displayed above be configured to modify the background color and text color when hovering a long label?
Solution
Just configure the poptip property in the theme.
theme:{
component: {
poptip: {
contentStyle: {
fill: '#fff',
},
panel: {
fill: '#ccc'
}
}
}
}
Code Example
const spec = {
type: 'bar',
data: [
{
id: 'barData',
values: [
{
name: 'AppleAppleAppleAppleAppleAppleAppleAppleAppleAppleApple',
value: 214480
},
{
name: 'Google',
value: 155506
},
{
name: 'Amazon',
value: 100764
},
{
name: 'Microsoft',
value: 92715
},
{
name: 'Coca-Cola',
value: 66341
},
{
name: 'Samsung',
value: 59890
},
{
name: 'Toyota',
value: 53404
},
{
name: 'Mercedes-Benz',
value: 48601
},
{
name: 'Facebook',
value: 45168
},
{
name: "McDonald's",
value: 43417
},
{
name: 'Intel',
value: 43293
},
{
name: 'IBM',
value: 42972
},
{
name: 'BMW',
value: 41006
},
{
name: 'Disney',
value: 39874
},
{
name: 'Cisco',
value: 34575
},
{
name: 'GE',
value: 32757
},
{
name: 'Nike',
value: 30120
},
{
name: 'Louis Vuitton',
value: 28152
},
{
name: 'Oracle',
value: 26133
},
{
name: 'Honda',
value: 23682
}
]
}
],
direction: 'horizontal',
xField: 'value',
yField: 'name',
axes: [
{
orient: 'bottom',
visible: false
}
],
label: {
visible: true
},
theme:{
component: {
poptip: {
contentStyle: {
fill: '#fff',
},
panel: {
fill: '#ccc'
}
}
}
}
};
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
💖 💪 🙅 🚩
SimaQ
Posted on June 26, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.