How to limit the number of lines in Tooltip?
Published: 2024-05-24 08:39:38

## Problem description

  When there are too many data items in the Tooltip, it will be automatically categorized as others after more than 20 items. Can I customize this number?

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c07d1581bb894db1bae2fba94ee8a88e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=846&h=778&s=73202&e=png&b=ffffff)

  


## Solution

Tooltip supports setting the maximum number of lines through `maxLineCount`. It should be noted that vchart's tooltip supports multiple types, and now they need to be set separately.

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2a87ecfd60b94c86848a858fb824e407~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3318&h=1212&s=376462&e=png&b=fffefe)

  


## Code Examples

```
const spec = {
  type: 'line',
  data: {
    values: [
      { type: 'Nail polish', country: 'Africa', value: 4229 },
      { type: 'Nail polish', country: 'EU', value: 4376 },
      { type: 'Nail polish', country: 'China', value: 3054 },
      { type: 'Nail polish', country: 'USA', value: 12814 },
      { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
      { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
      { type: 'Eyebrow pencil', country: 'China', value: 5067 },
      { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
      { type: 'Rouge', country: 'Africa', value: 5221 },
      { type: 'Rouge', country: 'EU', value: 3574 },
      { type: 'Rouge', country: 'China', value: 7004 },
      { type: 'Rouge', country: 'USA', value: 11624 },
      { type: 'Lipstick', country: 'Africa', value: 9256 },
      { type: 'Lipstick', country: 'EU', value: 4376 },
      { type: 'Lipstick', country: 'China', value: 9054 },
      { type: 'Lipstick', country: 'USA', value: 8814 },
      { type: 'Eyeshadows', country: 'Africa', value: 3308 },
      { type: 'Eyeshadows', country: 'EU', value: 4572 },
      { type: 'Eyeshadows', country: 'China', value: 12043 },
      { type: 'Eyeshadows', country: 'USA', value: 12998 },
      { type: 'Eyeliner', country: 'Africa', value: 5432 },
      { type: 'Eyeliner', country: 'EU', value: 3417 },
      { type: 'Eyeliner', country: 'China', value: 15067 },
      { type: 'Eyeliner', country: 'USA', value: 12321 },
      { type: 'Foundation', country: 'Africa', value: 13701 },
      { type: 'Foundation', country: 'EU', value: 5231 },
      { type: 'Foundation', country: 'China', value: 10119 },
      { type: 'Foundation', country: 'USA', value: 10342 },
      { type: 'Lip gloss', country: 'Africa', value: 4008 },
      { type: 'Lip gloss', country: 'EU', value: 4572 },
      { type: 'Lip gloss', country: 'China', value: 12043 },
      { type: 'Lip gloss', country: 'USA', value: 22998 },
      { type: 'Mascara', country: 'Africa', value: 18712 },
      { type: 'Mascara', country: 'EU', value: 6134 },
      { type: 'Mascara', country: 'China', value: 10419 },
      { type: 'Mascara', country: 'USA', value: 11261 }
    ]
  },
  title: {
    visible: true,
    text: '100% stacked line chart of cosmetic products sales'
  },
  percent: true,
  xField: 'type',
  yField: 'value',
  seriesField: 'country',
  legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
  axes: [
    {
      orient: 'left',
      label: {
        formatMethod(val) {
          return `${(val * 100).toFixed(2)}%`;
        }
      }
    }
  ],
  tooltip: {
    mark: {
      maxLineCount: 2
    },
    dimension: {
      maxLineCount: 2
    }
  }
};

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

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
```

## Result Display

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f3921dc4eb34f0eb6fc19c5e4bc2a49~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1686&h=1056&s=145035&e=png&b=ffffff)

## Related documents

-   [Tooltip tip information tutorial](https://visactor.com/vchart/guide/tutorial_docs/Chart_Concepts/Tooltip)
-   [Tooltip configuration document](https://visactor.com/vchart/option/barChart#tooltip.dimension.maxLineCount)
-   [VChart github](https://github.com/VisActor/VChart)