> ## 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.
# Visualizations
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
{isLoaded && `
}} />}
Powered by Lucidworks Agent Studio
;
};
[old doc.lw link]: https//doc.lucidworks.com/app-studio/4.2/3152
[localhost link]: http://localhost:3000/docs/5/app-studio/reference/modules/visualisations/overview
[mintlify link]: https://doc.lucidworks.com/docs/5/app-studio/reference/modules/visualisations/overview
The *chart tag library* is a collection of JSP tags for creating charts to visualize both search results (document result sets) and facets.
## Usage
You can visualize your data using the charts markup language. As an example, let us say you want to plot distinct segments of a search response facet as a chart, with each segment shown in proportion to size of that segment. For this you would add the [Chart Display](/docs/5/fusion/dev-portal/appkit/reference/modules/visualisations/chart-display) tag to your page, passing in a reference to the `twigkit.model.Response` containing the facet you want to plot and specify the facet name and type of chart you want to render. For example:
```xml wrap theme={"dark"}
```
In some cases, you might want to specify more options for your chart, or provide multiple data series to plot, for example. You do that by opening the `chart:display` tag and providing one or more chart options or tags in the markup body:
```xml wrap theme={"dark"}
```