Title
How to disable the display of abbreviated tooltips. Customized tooltips do not need to be displayed again?
Description
How to disable the display of abbreviated tooltips? Customized tooltips do not need to be displayed repeatedly, as shown below:
Solution
VChart will automatically omit long text and provide an interactive floating display poptip to display the complete text by default. If you want to turn it off, you can set poptip: false in the parameter of the constructor function when initializing the chart, as follows:
const vchart = new VChart(spec, {
// ...
poptip: false, // Close poptip for omitted text
});
Code Example
const spec = {
type: 'bar',
width: 300,
height: 250,
data: [
{
id: 'barData',
values: [
{
name: 'AppleAppleAppleApple',
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
}
};
const vchart = new VChart(spec, { dom: CONTAINER_ID, poptip: false });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
Top comments (0)