> ## Documentation Index
> Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Chart Tooltips

export const LwTemplate = ({title = "Key questions to get you started", icon = "sparkles", cta = "Powered by Agent Studio", linkHref = "https://lucidworks.com/demo/?utm_source=docs&utm_medium=referral&utm_campaign=docs_cta_ai"}) => {
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoaded(true);
    }, 500);
    return () => clearTimeout(timer);
  }, []);
  return <div className="lw-template-container">
      <Card title={title} icon={icon}>
        {isLoaded && <span dangerouslySetInnerHTML={{
    __html: `<lw-template id="a029c1a9-28be-427e-b0e1-5d918920246a"></lw-template
            >`
  }} />}
        <Link href={linkHref} className="agent-studio-link text-left text-gray-600 gap-2 dark:text-gray-400 text-sm font-medium flex flex-row items-center hover:text-primary dark:hover:text-primary-light group-hover:text-primary group-hover:dark:text-primary-light">Powered by Lucidworks Agent Studio</Link>
      </Card>
    </div>;
};

[old doc.lw link]: https//doc.lucidworks.com/app-studio/4.2/3144

[localhost link]: http://localhost:3000/docs/5/app-studio/reference/modules/visualisations/chart-tooltips

[mintlify link]: https://doc.lucidworks.com/docs/5/app-studio/reference/modules/visualisations/chart-tooltips

<LwTemplate />

## Tooltips

Tooltips display information when you hover over a point or area of the chart. Tooltips can be set across the whole chart or specifically to a series using the Chart Tooltip tag.

This tag must be nested in the [Chart Display tag](/docs/5/fusion/dev-portal/appkit/reference/modules/visualisations/chart-display), or in either of the series tags ([Series Facet tag](/docs/5/fusion/dev-portal/appkit/reference/modules/visualisations/facet-data-series) and [Series Result List tag](/docs/5/fusion/dev-portal/appkit/reference/modules/visualisations/data-series)) if the tooltip is specific to a series.

```xml wrap  theme={"dark"}
<chart:display response="response" title="Current Products vs Recommended Products">
    <series:facet name="current_products" type="column" title="Current Products"></series:facet>
    <series:facet name="recommended_products" type="column" title="Recommended Products"></series:facet>
    <chart:tooltip header-format="<b>{point.x}</b><br/>" point-format="{series.name}: <b>{point.y}</b><br/>"></chart:tooltip>
</chart:display>
```

<img src="https://mintcdn.com/lucidworks/J_LymSfRoWq3UOvg/assets/images/appkit/4.2/highchart-tooltip.png?fit=max&auto=format&n=J_LymSfRoWq3UOvg&q=85&s=ede9aaec312c95384d22746f0676b4d9" alt="Chart Tooltip" width="968" height="308" data-path="assets/images/appkit/4.2/highchart-tooltip.png" />

## Shared Tooltip

If you are rendering more then one series you can set the tooltip to be shared, this means it will display information about all the series for the point you have hovered over.

```xml wrap  theme={"dark"}
<chart:display response="response" title="Current Products vs Recommended Products" stacking="normal">
    <series:facet name="current_products" type="column" title="Current Products"></series:facet>
    <series:facet name="recommended_products" type="column" title="Recommended Products"></series:facet>
    <chart:tooltip headerFormat="<b>{point.x}</b><br/>" point-format="{series.name}: <b>{point.y}</b><br/>" shared="true"></chart:tooltip>
</chart:display>
```

<img src="https://mintcdn.com/lucidworks/J_LymSfRoWq3UOvg/assets/images/appkit/4.2/highchart-tooltip-shared.png?fit=max&auto=format&n=J_LymSfRoWq3UOvg&q=85&s=bc392045516ac9316b2b79444355822a" alt="Chart Tooltip Shared" width="960" height="299" data-path="assets/images/appkit/4.2/highchart-tooltip-shared.png" />

To see all related attributes, see the [chart:tooltip](/docs/5/fusion/dev-portal/appkit/reference/tags/lightning.directive.chartTooltip) tag documentation.