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;
Top comments (0)