DEV Community

SimaQ
SimaQ

Posted on

Can the tip displayed above be configured to modify the background color and text color when hovering a long label?

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?

Image description

Solution

Just configure the poptip property in the theme.

theme:{ component: { poptip: { contentStyle: { fill: '#fff', }, panel: { fill: '#ccc' } } } } 
Enter fullscreen mode Exit fullscreen mode

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; 
Enter fullscreen mode Exit fullscreen mode

Result

Image description

Related Documents

Top comments (0)