--- title: "Introduction to Charts & Graphs" slug: "introduction-to-charts-graphs" updated: 2025-09-26T02:16:22Z published: 2025-09-26T02:16:22Z canonical: "docs.unqork.io/introduction-to-charts-graphs" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.unqork.io/llms.txt > Use this file to discover all available pages before exploring further. # Introduction to Charts & Graphs ## Overview The **Charts & Graphs** group of components display aggregated statistics of data. These data visualization tools help end-users to gather insights from a data set retrieved by a [Plug-In component](/v1/docs/plug-in-component). > [!NOTE] > In Express View, these components display as widgets. Widgets can display data as numeric metrics, tables, or charts, so your end-users can interact with it. You'll find the [Charts & Graphs](/v1/docs/charts-graphs) components in the Charts & Graphs group to the left of the Module Builder. ## What Are the Charts & Graphs Components? Click on the list below to learn more about each chart and graph component: ChartKPIMapMap V2Vega Chart ## Chart Component The [Chart component](/v1/docs/chart-component) makes it easy to add different types of charts to your module. This component loops through every index of a data structure, then displays numerical values in the chart. With the Chart component, you can choose from the following chart types: | Bar | Funnel | Pie | | --- | --- | --- | | Bubble | Heatmap | Scatter | | Column | Line | Spline | Here's an Express View example of a bar and column chart in action: [![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Charts-Graphs_Bar_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A19Z&se=2026-11-08T11%3A18%3A19Z&sr=c&sp=r&sig=zbT8NK6gL3jflE1wCoVASKJRvM%2BhgdKKOYOWiA3X2GA%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Charts-Graphs%20Bar.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A19Z&se=2026-11-08T11%3A18%3A19Z&sr=c&sp=r&sig=zbT8NK6gL3jflE1wCoVASKJRvM%2BhgdKKOYOWiA3X2GA%3D) ## KPI (Key Performance Indicator) Component Sometimes you want to measure the performance of a particular activity. For example, you might want to see the number of submissions in your dashboard. You can achieve this example by adding a [KPI component](/v1/docs/kpi-component) to your dashboard. KPIs are a great way to measure and view a key metric. Here's a KPI widget in Express View, displaying the total number of accounts (submissions) in a dashboard: [![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboards_KPI_Expressminusdelete_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A19Z&se=2026-11-08T11%3A18%3A19Z&sr=c&sp=r&sig=zbT8NK6gL3jflE1wCoVASKJRvM%2BhgdKKOYOWiA3X2GA%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol%20Dashboards%20KPI%20Expressminusdelete.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A19Z&se=2026-11-08T11%3A18%3A19Z&sr=c&sp=r&sig=zbT8NK6gL3jflE1wCoVASKJRvM%2BhgdKKOYOWiA3X2GA%3D) ## Map Component You'll notice a [Map](/v1/docs/map-component) and a Map v2 component. The Map component is a basic chart-like component that displays a map chart. The Map v2 component uses Google Maps to display an interactive Google Maps view. Here's an example of how a Map widget looks in Express View: [![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Charts-Graphs_Mapv1_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A19Z&se=2026-11-08T11%3A18%3A19Z&sr=c&sp=r&sig=zbT8NK6gL3jflE1wCoVASKJRvM%2BhgdKKOYOWiA3X2GA%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Charts-Graphs%20Mapv1.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A19Z&se=2026-11-08T11%3A18%3A19Z&sr=c&sp=r&sig=zbT8NK6gL3jflE1wCoVASKJRvM%2BhgdKKOYOWiA3X2GA%3D) ## Map v2 Component The [Map v2](/v1/docs/map-v2-component) component uses Google Maps to display an interactive Google Maps view for your end-user. The simplest way to use the Map v2 component is to use it with an [Address Search](/v1/docs/address-search-component) component. Once configured, your end-user can enter their address in Express View and the component pinpoints their location on the map. Here's an example of the Map v2 widget in Express View: [![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Charts-Graphs_Mapv2_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A19Z&se=2026-11-08T11%3A18%3A19Z&sr=c&sp=r&sig=zbT8NK6gL3jflE1wCoVASKJRvM%2BhgdKKOYOWiA3X2GA%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Charts-Graphs%20Mapv2.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A19Z&se=2026-11-08T11%3A18%3A19Z&sr=c&sp=r&sig=zbT8NK6gL3jflE1wCoVASKJRvM%2BhgdKKOYOWiA3X2GA%3D) ## Vega Chart Component The [Vega Chart component](/v1/docs/vega-chart-component) creates a graphical display of data sets in an [application](/v1/docs/introduction-to-unqork-applications). In the Module Builder, Creators configure the Vega Chart component using one or more chart types and data sets. In Express View, the Vega Chart lets end-users visualize the data sets in a meaningful and intuitive way. > [!WARNING] > The Vega Chart component is a Vega (2.0) runtime component and is not supported in the runtime. Below are some common examples of when to use the Vega Chart component: - To display a scatter plot to track the number of sales for each sales agent in your department. - To display a pie chart to show the percentages of end-user submissions. - To display a bar graph that shows product consumption by demographic. Here's an example of the Vega Chart component in Express View: [![A static image displaying the Vega Chart in Express View](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Example_ExpressView_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A19Z&se=2026-11-08T11%3A18%3A19Z&sr=c&sp=r&sig=zbT8NK6gL3jflE1wCoVASKJRvM%2BhgdKKOYOWiA3X2GA%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Example%20ExpressView.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A19Z&se=2026-11-08T11%3A18%3A19Z&sr=c&sp=r&sig=zbT8NK6gL3jflE1wCoVASKJRvM%2BhgdKKOYOWiA3X2GA%3D) End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View. End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience. Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections.