How to display the entire content of abbreviated text when hovering?
Published: 2024-04-19 06:59:07

## Title

How to display the entire content of abbreviated text when hovering the mouse?

## Description

For the following case, can the hover tag display all the information of the tip?
![](https://bytedance.larkoffice.com/space/api/box/stream/download/asynccode/?code=ZjBiZTM3YjE4MjAyOTU1MjNjNmM5YjI1MWY4OGEzMDZfV1JqQkd0cjc1cjdMNkFmNU92akFQTGVDWWNWRzl5NndfVG9rZW46QUZGT2JtR1kyb0lPWWl4U1FTSGN2SGU1bjlmXzE3MTM1MDk3ODc6MTcxMzUxMzM4N19WNA)
<br>

## Solution

You can configure `poptip: true` when creating a new VChart, and then set the tag `style.pickable: true` to enable tag interaction, so that the full content poptip can be displayed when hovering over the abbreviated tag.
![](https://bytedance.larkoffice.com/space/api/box/stream/download/asynccode/?code=NDA3ODY4NTAzYTI2N2JmZTkyNzE5ZWFiMTFhYTY0ZDlfVVd0TmRqdkFKN0pQd3RTc0tPY0Rvamo3dHdCR3ZuUFhfVG9rZW46RldrbGIyOUFzb0NaYU14VFdwSmNFZ1hpblJlXzE3MTM1MDk3ODc6MTcxMzUxMzM4N19WNA)

## Code Example

```Markdown
const spec = {
  type: 'pie',
  valueField: 'y',
  categoryField: 'originXData',
  label: {
    visible: true,
    position: 'outside',
    style: {
      pickable: true
    }
  },
  legends: {
    orient: 'right'
  },
  title: {
    visible: true,
    text: 'Distribution of Active Device Usage Time',
    textStyle: {
      fontFamily: 'Times New Roman'
    }
  },
  data: {
    id: 'Others',
    values: [
      {
        x: 0,
        y: 0.14307327905613595,
        originXData: '2022-03-10',
        type: 'Others'
      },
      {
        x: 1,
        y: 0.21429552139096195,
        originXData: '2022-03-11',
        type: 'Others'
      },
      {
        x: 2,
        y: 0.20335734294489136,
        originXData: '2022-03-12',
        type: 'Others'
      },
      {
        x: 3,
        y: 0.2008694831063025,
        originXData: '2022-03-13',
        type: 'Others'
      },
      {
        x: 4,
        y: 0.1971832522288174,
        originXData: '2022-03-14',
        type: 'Others'
      },
      {
        x: 5,
        y: 0.2142196933878632,
        originXData: '2022-03-15',
        type: 'Others'
      },
      {
        x: 6,
        y: 0.2827589869448442,
        originXData: '2022-03-16',
        type: 'Others'
      },
      {
        x: 7,
        y: 0.11448070987270477,
        originXData: '2022-03-17',
        type: 'Others'
      },
      {
        x: 8,
        y: 0.05225580072971028,
        originXData: '2022-03-18',
        type: 'Others'
      },
      {
        x: 9,
        y: 0.14047231243026995,
        originXData: '2022-03-19',
        type: 'Others'
      },
      {
        x: 10,
        y: 0.28277882018816153,
        originXData: '2022-03-20',
        type: 'Others'
      },
      {
        x: 11,
        y: 0.1907366902350664,
        originXData: '2022-03-21',
        type: 'Others'
      },
      {
        x: 12,
        y: 0.09187776153132483,
        originXData: '2022-03-22',
        type: 'Others'
      },
      {
        x: 13,
        y: 0.1865056149692558,
        originXData: '2022-03-23',
        type: 'Others'
      },
      {
        x: 14,
        y: 0.24279307316823684,
        originXData: '2022-03-24',
        type: 'Others'
      },
      {
        x: 15,
        y: 0.021338783251485593,
        originXData: '2022-03-25',
        type: 'Others'
      },
      {
        x: 16,
        y: 0.01933475918339416,
        originXData: '2022-03-26',
        type: 'Others'
      },
      {
        x: 17,
        y: 0.12054221495926994,
        originXData: '2022-03-27',
        type: 'Others'
      },
      {
        x: 18,
        y: 0.21045103303733279,
        originXData: '2022-03-28',
        type: 'Others'
      },
      {
        x: 19,
        y: 0.09510339439959557,
        originXData: '2022-03-29',
        type: 'Others'
      },
      {
        x: 20,
        y: 0.10953268445458815,
        originXData: '2022-03-30',
        type: 'Others'
      },
      {
        x: 21,
        y: 0.033257671235135976,
        originXData: '2022-03-31',
        type: 'Others'
      },
      {
        x: 22,
        y: 0.17596385420505348,
        originXData: '2022-04-01',
        type: 'Others'
      },
      {
        x: 23,
        y: 0.21956883545536887,
        originXData: '2022-04-02',
        type: 'Others'
      },
      {
        x: 24,
        y: 0.10219962878682523,
        originXData: '2022-04-03',
        type: 'Others'
      },
      {
        x: 25,
        y: 0.22559599632037952,
        originXData: '2022-04-04',
        type: 'Others'
      },
      {
        x: 26,
        y: 0.16435385997820343,
        originXData: '2022-04-05',
        type: 'Others'
      },
      {
        x: 27,
        y: 0.1935519088636391,
        originXData: '2022-04-06',
        type: 'Others'
      },
      {
        x: 28,
        y: 0.07335880623323374,
        originXData: '2022-04-07',
        type: 'Others'
      },
      {
        x: 29,
        y: 0.32389684991741824,
        originXData: '2022-04-08',
        type: 'Others'
      },
      {
        x: 30,
        y: 0.10574926398978153,
        originXData: '2022-04-09',
        type: 'Others'
      },
      {
        x: 31,
        y: 0.09551619886403787,
        originXData: '2022-04-10',
        type: 'Others'
      },
      {
        x: 32,
        y: 0.18753913754340706,
        originXData: '2022-04-11',
        type: 'Others'
      },
      {
        x: 33,
        y: 0.07251128093720469,
        originXData: '2022-04-12',
        type: 'Others'
      },
      {
        x: 34,
        y: 0.27187881356101434,
        originXData: '2022-04-13',
        type: 'Others'
      },
      {
        x: 35,
        y: 0.03161092640346868,
        originXData: '2022-04-14',
        type: 'Others'
      },
      {
        x: 36,
        y: 0.08645234316145103,
        originXData: '2022-04-15',
        type: 'Others'
      },
      {
        x: 37,
        y: 0.07186915826544578,
        originXData: '2022-04-16',
        type: 'Others'
      },
      {
        x: 38,
        y: 0.13298789816789602,
        originXData: '2022-04-17',
        type: 'Others'
      },
      {
        x: 39,
        y: 0.002498664507185538,
        originXData: '2022-04-18',
        type: 'Others'
      },
      {
        x: 40,
        y: 0.23047255698181987,
        originXData: '2022-04-19',
        type: 'Others'
      },
      {
        x: 41,
        y: 0.2614287826126477,
        originXData: '2022-04-20',
        type: 'Others'
      },
      {
        x: 42,
        y: 0.1416942415946803,
        originXData: '2022-04-21',
        type: 'Others'
      },
      {
        x: 43,
        y: 0.16875110819471914,
        originXData: '2022-04-22',
        type: 'Others'
      },
      {
        x: 44,
        y: 0.17855071283439228,
        originXData: '2022-04-23',
        type: 'Others'
      },
      {
        x: 45,
        y: 0.19374483996277542,
        originXData: '2022-04-24',
        type: 'Others'
      },
      {
        x: 46,
        y: 0.15310293715544224,
        originXData: '2022-04-25',
        type: 'Others'
      },
      {
        x: 47,
        y: 0.054940671436646556,
        originXData: '2022-04-26',
        type: 'Others'
      },
      {
        x: 48,
        y: 0.15449255983596022,
        originXData: '2022-04-27',
        type: 'Others'
      },
      {
        x: 49,
        y: 0.013363330618058769,
        originXData: '2022-04-28',
        type: 'Others'
      },
      {
        x: 50,
        y: 0.04741482052942758,
        originXData: '2022-04-29',
        type: 'Others'
      },
      {
        x: 51,
        y: 0.20622154823735023,
        originXData: '2022-04-30',
        type: 'Others'
      },
      {
        x: 52,
        y: 0.06582002462369495,
        originXData: '2022-05-01',
        type: 'Others'
      },
      {
        x: 53,
        y: 0.09378151773093113,
        originXData: '2022-05-02',
        type: 'Others'
      },
      {
        x: 54,
        y: 0.020396192047011766,
        originXData: '2022-05-03',
        type: 'Others'
      },
      {
        x: 55,
        y: 0.18516266015947339,
        originXData: '2022-05-04',
        type: 'Others'
      },
      {
        x: 56,
        y: 0.10161741887065481,
        originXData: '2022-05-05',
        type: 'Others'
      },
      {
        x: 57,
        y: 0.1770505715131574,
        originXData: '2022-05-06',
        type: 'Others'
      },
      {
        x: 58,
        y: 0.11339797878184575,
        originXData: '2022-05-07',
        type: 'Others'
      },
      {
        x: 59,
        y: 0.14515252680521537,
        originXData: '2022-05-08',
        type: 'Others'
      },
      {
        x: 60,
        y: 0.26957310267383333,
        originXData: '2022-05-09',
        type: 'Others'
      },
      {
        x: 61,
        y: 0.19599754596225075,
        originXData: '2022-05-10',
        type: 'Others'
      },
      {
        x: 62,
        y: 0.17669944891975334,
        originXData: '2022-05-11',
        type: 'Others'
      },
      {
        x: 63,
        y: 0.1558657621841565,
        originXData: '2022-05-12',
        type: 'Others'
      },
      {
        x: 64,
        y: 0.059105464959508816,
        originXData: '2022-05-13',
        type: 'Others'
      },
      {
        x: 65,
        y: 0.12362337826604534,
        originXData: '2022-05-14',
        type: 'Others'
      },
      {
        x: 66,
        y: 0.15828457651759154,
        originXData: '2022-05-15',
        type: 'Others'
      },
      {
        x: 67,
        y: 0.16477088382957397,
        originXData: '2022-05-16',
        type: 'Others'
      },
      {
        x: 68,
        y: 0.18942277783699418,
        originXData: '2022-05-17',
        type: 'Others'
      },
      {
        x: 69,
        y: 0.09183608563616476,
        originXData: '2022-05-18',
        type: 'Others'
      },
      {
        x: 70,
        y: 0.11050570522075298,
        originXData: '2022-05-19',
        type: 'Others'
      },
      {
        x: 71,
        y: 0.27962609951245393,
        originXData: '2022-05-20',
        type: 'Others'
      },
      {
        x: 72,
        y: 0.03528028179470999,
        originXData: '2022-05-21',
        type: 'Others'
      },
      {
        x: 73,
        y: 0.05384340884433819,
        originXData: '2022-05-22',
        type: 'Others'
      },
      {
        x: 74,
        y: 0.2566109634380092,
        originXData: '2022-05-23',
        type: 'Others'
      },
      {
        x: 75,
        y: 0.04706710842769647,
        originXData: '2022-05-24',
        type: 'Others'
      },
      {
        x: 76,
        y: 0.0690497936642742,
        originXData: '2022-05-25',
        type: 'Others'
      },
      {
        x: 77,
        y: 0.22240850644149432,
        originXData: '2022-05-26',
        type: 'Others'
      },
      {
        x: 78,
        y: 0.25247664377313944,
        originXData: '2022-05-27',
        type: 'Others'
      },
      {
        x: 79,
        y: 0.040225106713192425,
        originXData: '2022-05-28',
        type: 'Others'
      },
      {
        x: 80,
        y: 0.163839716976959,
        originXData: '2022-05-29',
        type: 'Others'
      },
      {
        x: 81,
        y: 0.07390521222877466,
        originXData: '2022-05-30',
        type: 'Others'
      },
      {
        x: 82,
        y: 0.012491096724084544,
        originXData: '2022-05-31',
        type: 'Others'
      },
      {
        x: 83,
        y: 0.10259216712446957,
        originXData: '2022-06-01',
        type: 'Others'
      },
      {
        x: 84,
        y: 0.08823120890048103,
        originXData: '2022-06-02',
        type: 'Others'
      },
      {
        x: 85,
        y: 0.09010761416766332,
        originXData: '2022-06-03',
        type: 'Others'
      },
      {
        x: 86,
        y: 0.04192469399478194,
        originXData: '2022-06-04',
        type: 'Others'
      },
      {
        x: 87,
        y: 0.11732142545122648,
        originXData: '2022-06-05',
        type: 'Others'
      },
      {
        x: 88,
        y: 0.18585780122660603,
        originXData: '2022-06-06',
        type: 'Others'
      },
      {
        x: 89,
        y: 0.0870820363115993,
        originXData: '2022-06-07',
        type: 'Others'
      },
      {
        x: 90,
        y: 0.2826807478126429,
        originXData: '2022-06-08',
        type: 'Others'
      },
      {
        x: 91,
        y: 0.06430150639799394,
        originXData: '2022-06-09',
        type: 'Others'
      },
      {
        x: 92,
        y: 0.16911472425643598,
        originXData: '2022-06-10',
        type: 'Others'
      },
      {
        x: 93,
        y: 0.04418197716587454,
        originXData: '2022-06-11',
        type: 'Others'
      },
      {
        x: 94,
        y: 0.05620634466431073,
        originXData: '2022-06-12',
        type: 'Others'
      },
      {
        x: 95,
        y: 0.09831084516203888,
        originXData: '2022-06-13',
        type: 'Others'
      },
      {
        x: 96,
        y: 0.09479199824809702,
        originXData: '2022-06-14',
        type: 'Others'
      },
      {
        x: 97,
        y: 0.051668527899557275,
        originXData: '2022-06-15',
        type: 'Others'
      },
      {
        x: 98,
        y: 0.058331438549321345,
        originXData: '2022-06-16',
        type: 'Others'
      },
      {
        x: 99,
        y: 0.23034428608925023,
        originXData: '2022-06-17',
        type: 'Others'
      },
      {
        x: 100,
        y: 0.20177663186099093,
        originXData: '2022-06-18',
        type: 'Others'
      },
      {
        x: 101,
        y: 0.18978717005592927,
        originXData: '2022-06-19',
        type: 'Others'
      },
      {
        x: 102,
        y: 0.28782493963004174,
        originXData: '2022-06-20',
        type: 'Others'
      },
      {
        x: 103,
        y: 0.1467829353931672,
        originXData: '2022-06-21',
        type: 'Others'
      },
      {
        x: 104,
        y: 0.128230433126852,
        originXData: '2022-06-22',
        type: 'Others'
      },
      {
        x: 105,
        y: 0.0548449051449372,
        originXData: '2022-06-23',
        type: 'Others'
      },
      {
        x: 106,
        y: 0.13419037997388159,
        originXData: '2022-06-24',
        type: 'Others'
      },
      {
        x: 107,
        y: 0.03650370242329377,
        originXData: '2022-06-25',
        type: 'Others'
      },
      {
        x: 108,
        y: 0.11300795916055194,
        originXData: '2022-06-26',
        type: 'Others'
      },
      {
        x: 109,
        y: 0.2892243111269155,
        originXData: '2022-06-27',
        type: 'Others'
      },
      {
        x: 110,
        y: 0.12881197140544712,
        originXData: '2022-06-28',
        type: 'Others'
      },
      {
        x: 111,
        y: 0.08568882796496745,
        originXData: '2022-06-29',
        type: 'Others'
      },
      {
        x: 112,
        y: 0.1876531712328392,
        originXData: '2022-06-30',
        type: 'Others'
      },
      {
        x: 113,
        y: 0.12802513423936035,
        originXData: '2022-07-01',
        type: 'Others'
      },
      {
        x: 114,
        y: 0.04085275656525246,
        originXData: '2022-07-02',
        type: 'Others'
      },
      {
        x: 115,
        y: 0.11571890266638503,
        originXData: '2022-07-03',
        type: 'Others'
      },
      {
        x: 116,
        y: 0.0506988188387463,
        originXData: '2022-07-04',
        type: 'Others'
      },
      {
        x: 117,
        y: 0.1494689703003086,
        originXData: '2022-07-05',
        type: 'Others'
      },
      {
        x: 118,
        y: 0.27730792196171267,
        originXData: '2022-07-06',
        type: 'Others'
      },
      {
        x: 119,
        y: 0.06055467590069835,
        originXData: '2022-07-07',
        type: 'Others'
      },
      {
        x: 120,
        y: 0.07687827184447993,
        originXData: '2022-07-08',
        type: 'Others'
      },
      {
        x: 121,
        y: 0.2566842936513114,
        originXData: '2022-07-09',
        type: 'Others'
      },
      {
        x: 122,
        y: 0.09887321357707671,
        originXData: '2022-07-10',
        type: 'Others'
      },
      {
        x: 123,
        y: 0.02730324273499053,
        originXData: '2022-07-11',
        type: 'Others'
      },
      {
        x: 124,
        y: 0.06536264665124339,
        originXData: '2022-07-12',
        type: 'Others'
      },
      {
        x: 125,
        y: 0.18847345356749562,
        originXData: '2022-07-13',
        type: 'Others'
      },
      {
        x: 126,
        y: 0.28310751524370814,
        originXData: '2022-07-14',
        type: 'Others'
      },
      {
        x: 127,
        y: 0.04893307176362374,
        originXData: '2022-07-15',
        type: 'Others'
      },
      {
        x: 128,
        y: 0.05023463131640375,
        originXData: '2022-07-16',
        type: 'Others'
      },
      {
        x: 129,
        y: 0.1817991933208958,
        originXData: '2022-07-17',
        type: 'Others'
      },
      {
        x: 130,
        y: 0.041091429149233895,
        originXData: '2022-07-18',
        type: 'Others'
      },
      {
        x: 131,
        y: 0.2152272967544634,
        originXData: '2022-07-19',
        type: 'Others'
      },
      {
        x: 132,
        y: 0.2294092597480583,
        originXData: '2022-07-20',
        type: 'Others'
      },
      {
        x: 133,
        y: 0.04812026594860752,
        originXData: '2022-07-21',
        type: 'Others'
      },
      {
        x: 134,
        y: 0.15062608602077723,
        originXData: '2022-07-22',
        type: 'Others'
      },
      {
        x: 135,
        y: 0.04674341937375404,
        originXData: '2022-07-23',
        type: 'Others'
      },
      {
        x: 136,
        y: 0.004691953334433059,
        originXData: '2022-07-24',
        type: 'Others'
      },
      {
        x: 137,
        y: 0.2347717591286564,
        originXData: '2022-07-25',
        type: 'Others'
      },
      {
        x: 138,
        y: 0.0949449243680592,
        originXData: '2022-07-26',
        type: 'Others'
      },
      {
        x: 139,
        y: 0.0025869855432198155,
        originXData: '2022-07-27',
        type: 'Others'
      },
      {
        x: 140,
        y: 0.16298210425832638,
        originXData: '2022-07-28',
        type: 'Others'
      },
      {
        x: 141,
        y: 0.04294961250823847,
        originXData: '2022-07-29',
        type: 'Others'
      },
      {
        x: 142,
        y: 0.23218888847906793,
        originXData: '2022-07-30',
        type: 'Others'
      },
      {
        x: 143,
        y: 0.13214197196191788,
        originXData: '2022-07-31',
        type: 'Others'
      },
      {
        x: 144,
        y: 0.23639487247464253,
        originXData: '2022-08-01',
        type: 'Others'
      },
      {
        x: 145,
        y: 0.2198732786335028,
        originXData: '2022-08-02',
        type: 'Others'
      },
      {
        x: 146,
        y: 0.09819916842568255,
        originXData: '2022-08-03',
        type: 'Others'
      },
      {
        x: 147,
        y: 0.2115038338762922,
        originXData: '2022-08-04',
        type: 'Others'
      },
      {
        x: 148,
        y: 0.27763124426038616,
        originXData: '2022-08-05',
        type: 'Others'
      },
      {
        x: 149,
        y: 0.2409936721598261,
        originXData: '2022-08-06',
        type: 'Others'
      },
      {
        x: 150,
        y: 0.005052818869306636,
        originXData: '2022-08-07',
        type: 'Others'
      },
      {
        x: 151,
        y: 0.10509982509852842,
        originXData: '2022-08-08',
        type: 'Others'
      },
      {
        x: 152,
        y: 0.14684738504256475,
        originXData: '2022-08-09',
        type: 'Others'
      },
      {
        x: 153,
        y: 0.06986602610353633,
        originXData: '2022-08-10',
        type: 'Others'
      },
      {
        x: 154,
        y: 0.13023043447411542,
        originXData: '2022-08-11',
        type: 'Others'
      },
      {
        x: 155,
        y: 0.12264398311386293,
        originXData: '2022-08-12',
        type: 'Others'
      },
      {
        x: 156,
        y: 0.20382835554590054,
        originXData: '2022-08-13',
        type: 'Others'
      },
      {
        x: 157,
        y: 0.11198492143289837,
        originXData: '2022-08-14',
        type: 'Others'
      },
      {
        x: 158,
        y: 0.07253893276910192,
        originXData: '2022-08-15',
        type: 'Others'
      },
      {
        x: 159,
        y: 0.15861094511518986,
        originXData: '2022-08-16',
        type: 'Others'
      },
      {
        x: 160,
        y: 0.022509784190967996,
        originXData: '2022-08-17',
        type: 'Others'
      },
      {
        x: 161,
        y: 0.07739714475795986,
        originXData: '2022-08-18',
        type: 'Others'
      },
      {
        x: 162,
        y: 0.05940452504975817,
        originXData: '2022-08-19',
        type: 'Others'
      },
      {
        x: 163,
        y: 0.22652737632082653,
        originXData: '2022-08-20',
        type: 'Others'
      },
      {
        x: 164,
        y: 0.09417964564260689,
        originXData: '2022-08-21',
        type: 'Others'
      },
      {
        x: 165,
        y: 0.31222056741049686,
        originXData: '2022-08-22',
        type: 'Others'
      },
      {
        x: 166,
        y: 0.013723402827825214,
        originXData: '2022-08-23',
        type: 'Others'
      },
      {
        x: 167,
        y: 0.1677747137304682,
        originXData: '2022-08-24',
        type: 'Others'
      },
      {
        x: 168,
        y: 0.11204260848132035,
        originXData: '2022-08-25',
        type: 'Others'
      },
      {
        x: 169,
        y: 0.1582346072173578,
        originXData: '2022-08-26',
        type: 'Others'
      },
      {
        x: 170,
        y: 0.1341413906744606,
        originXData: '2022-08-27',
        type: 'Others'
      },
      {
        x: 171,
        y: 0.13629356138973928,
        originXData: '2022-08-28',
        type: 'Others'
      },
      {
        x: 172,
        y: 0.21164869928303595,
        originXData: '2022-08-29',
        type: 'Others'
      },
      {
        x: 173,
        y: 0.013993773801955914,
        originXData: '2022-08-30',
        type: 'Others'
      },
      {
        x: 174,
        y: 0.057582671694496976,
        originXData: '2022-08-31',
        type: 'Others'
      },
      {
        x: 175,
        y: 0.17667401662601473,
        originXData: '2022-09-01',
        type: 'Others'
      },
      {
        x: 176,
        y: 0.1877708486581661,
        originXData: '2022-09-02',
        type: 'Others'
      },
      {
        x: 177,
        y: 0.02921282831170386,
        originXData: '2022-09-03',
        type: 'Others'
      },
      {
        x: 178,
        y: 0.18747152615768573,
        originXData: '2022-09-04',
        type: 'Others'
      },
      {
        x: 179,
        y: 0.03413689752079186,
        originXData: '2022-09-05',
        type: 'Others'
      },
      {
        x: 180,
        y: 0.032656498599706374,
        originXData: '2022-09-06',
        type: 'Others'
      }
    ]
  }
};

const vchart = new VChart(spec, { dom: CONTAINER_ID, poptip: true });
vchart.renderSync();

// Just for the convenience of console debugging, do not copy
window['vchart'] = vchart;
```

## Results

Online demo：https://codesandbox.io/p/sandbox/poptip-qjx6sz?file=%2Fsrc%2Findex.ts%3A12%2C15
![](https://bytedance.larkoffice.com/space/api/box/stream/download/asynccode/?code=Zjk0OWVmYzE5YmM2NWFkZjg5NTFhNTExNDQzYzkwYWRfWXNDb2FpYmZTRmxTN01PN1ZFbExZTXp4dDhqajdRQWVfVG9rZW46SjliYmJ4ZnBJb2daSFN4TklKR2NpbWh2bmNkXzE3MTM1MDk3ODc6MTcxMzUxMzM4N19WNA)
<br>

<br>

## Related Documentation

Related api：https://www.visactor.io/vchart/api/API/vchart
github：https://github.com/VisActor/VChart
<br>

<br>