DEV Community

SimaQ
SimaQ

Posted on

How to disable the display of abbreviated tooltips. Customized tooltips do not need to be displayed again

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:

Image description

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

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

Related Documents

Top comments (0)