# qlik-visual web component

Information noteIf you are using Qlik Sense Business or Qlik Sense Enterprise SaaS, see the API documentation at the Qlik ([Developer Portal](https://qlik.dev/)).

## Syntax

<qlik-visual>

## Version history

Version history

| Version state | Details |
| --- | --- |
| Introduced | 2.2 |

Qlik visual is a custom element definition, <qlik-visual>, that uses the Visualization API and exposes it as a web component. It allows you to create and modify visualizations on the fly without making use of the Qlik Sense client. Qlik visual supports:

* Displaying an existing visualization (by defining a visid to the element) in a web page.
* Creating visualizations on the fly using an existing app by injecting them into the web page.
* Dynamically modifying properties and attributes of the visualizations.

## Getting started

[Creating visualizations on the fly](https://help.qlik.com/en-US/sense-developer/May2025/Subsystems/Mashups/Content/Sense_Mashups/Create/create-visualizations-on-the-fly.htm) to get started using the <qlik-visual> web component.

## Examples of use

Learn how to use the <qlik-visual> web component.

[Creating visualizations on the fly](https://help.qlik.com/en-US/sense-developer/May2025/Subsystems/Mashups/Content/Sense_Mashups/Create/create-visualizations-on-the-fly.htm)

## Properties

Properties

| Name | Type | Description |
| --- | --- | --- |
| appid | String | Qlik Sense app id.<br><br>If all Qlik visuals use visualizations from the same app, you only need to define appid for the first instance.<br><br>If you use visualizations from different apps you should always define appid. |
| config | Object | Optional.<br><br>Additional configuration parameters:<br><br><ul> <li> <p><span>host</span>: </p> <ul> <li><span>Type</span>: String</li> <li><span>Attr</span>: &lt;optional&gt;</li> <li><span>Descr</span>: Qlik host.</li> </ul> </li> <li> <p><span>port</span>: </p> <ul> <li><span>Type</span>: String or Integer</li> <li><span>Attr</span>: &lt;optional&gt;</li> <li><span>Descr</span>: Port number.</li> </ul> </li> <li> <p><span>prefix</span>: </p> <ul> <li> <p><span>Type</span>: String</p> </li><li> </li><li><span>Attr</span>: &lt;optional&gt;</li> <li> </li><li><span>Descr</span>: </li> </ul> </li> <li> <p><span>isSecure</span>: </p> <ul> <li> <p><span>Type</span>: Boolean</p> </li><li> </li><li><span>Attr</span>: &lt;optional&gt;</li> <li> </li><li><span>Descr</span>: Qlik virtual proxy. "<span>/</span>" if no proxy.</li> </ul> </li> <li> <p><span>openWithoutData</span>: </p> <ul> <li><span>Type</span>: Boolean</li> <li><span>Attr</span>: &lt;optional&gt;</li> <li><span>Descr</span>: Use SSL.</li> </ul> </li> <li> <p><span>identity</span>: </p> <ul> <li> <p><span>Type</span>: String</p> </li><li> </li><li><span>Attr</span>: &lt;optional&gt;</li> <li> </li><li><span>Descr</span>: Unique identity for the session. If omitted, the session will be shared.</li> </ul> </li> </ul> |
| visid | String | Optional.<br><br>Visualization id. Used when displaying existing visualizations. |
| type | String | Optional.<br><br>Visualization type. Used when creating a visualization on the fly. Can be one of:<br><br><ul> <li><span>barchart</span> </li> <li><span>combochart</span> </li> <li><span>gauge</span> </li> <li><span>kpi</span> </li> <li><span>linechart</span> </li> <li><span>piechart</span> </li> <li><span>pivot-table</span> </li> <li><span>scatterplot</span> </li> <li><span>table</span> </li> <li><span>treemap</span> </li> <li><span>extension</span> </li> </ul> |
| options | String | Optional. Options to set.<br><br>[Options](https://help.qlik.com/en-US/sense-developer/May2025/Subsystems/APIs/Content/Sense_ClientAPIs/QlikVisual/qlik-visual-options.htm) for all the properties that can be set for each visualization type. |
| cols | String | Column definitions, dimensions and measures. Each entry can be of the following structures:<br><br><ul> <li>String</li> <li>NxDimension</li> <li>NxMeasure</li> </ul><br><br>If the NxDimension or the NxMeasure refer to a library dimension or a library measure, you also need to add qType : "measure" or "dimension".<br><br>This parameter is optional. Leave empty for visualizations that does not have dimensions or measures.<br><br>[Columns](https://help.qlik.com/en-US/sense-developer/May2025/Subsystems/APIs/Content/Sense_ClientAPIs/QlikVisual/qlik-visual-columns.htm) for details and examples. |