# Overview {% embed url="" %} You can easily add charts to your Noloco apps both on views and on blank pages. In this video, learn how to: * Configure the charts display option on views * Choose the perfect chart type for your data * Make charts take up the full-width of the screen * Use blank pages to add charts from different data tables * Filter chart data to only show data that meet certain criteria * Add visibility rules to control who can see specific charts ### Where can I add charts to my app? You can choose the charts display option on [views](https://guides.noloco.io/pages/views) and you can also add charts to [blank pages](https://guides.noloco.io/pages/blank-pages). {% hint style="info" %} If you want to add multiple charts to the same page pulling in data from *different* tables, you'll have to add a [Blank page](https://guides.noloco.io/pages/blank-pages) (as shown in the video) as opposed to using a view. {% endhint %} ### What chart types can I choose from? You have six different options for charts in Noloco. ### Line charts Line charts display trends over time by connecting data points with a continuous line, making it easy to visualize changes and patterns in data across intervals. ![](https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-8e8f732771bdf6b63c105ffd27f6fac2b585e03b%2Fimage.png?alt=media) ### Bar charts Bar charts use easy to read bars to represent data values, allowing for straightforward comparison of different categories or groups within a dataset. ![](https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-53b2c2aa76957909d624201a7ec022609c413f1d%2Fimage.png?alt=media) ### Stacked Bar Charts Stacked bar charts break down and compare parts of a whole across different categories by stacking bars, providing a clear view of the composition of each bar segment. {% @arcade/embed url="" flowId="VVCCAcqiwt7HcGcSK7mc" %} ### Area charts Area charts are similar to line charts but with the area below the line filled in, which emphasizes the magnitude of changes over time and shows cumulative totals. ![](https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-9b00766f956b3d2c75ce5ff1da1358d48e7a6452%2Fimage.png?alt=media) ### Donut Charts Donut charts are a variation of pie charts with a central hole, used to represent proportions of a whole, making it easier to compare different segments.
### Funnel Charts Funnel charts visualize the progressive reduction of data as it passes through sequential stages, commonly used to track sales or user journey processes. ![](https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-22c687cc884926ba831394fe17126864c0f925d2%2Fimage.png?alt=media) ### Radar Charts Radar charts display multivariate data on a two-dimensional plane with axes starting from the same point, ideal for comparing the performance of multiple variables or categories. ![](https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-ea81c7baff2787f6f1ba0f21824074afe7473fab%2Fimage.png?alt=media) ### Statistics Statistic charts present a single, prominent number that summarizes a key aspect of a dataset, offering a quick and clear insight into a specific metric or value.
### How to add a Chart dashboard to your app 1\) Add a View ![](https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-a7ab5330d87c0537ade41d62a901447c72965c72%2FScreenshot%202021-12-31%20at%2014.19.28.png?alt=media) 2\) Change the **Display** to **Charts** ![](https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-3e6333fb4ded02baf298a06c3e3ec8bb08954436%2Fimage.png?alt=media) 3\) Edit your first chart by clicking the pencil icon ![](https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-2eb2b4547d9369e0d7971b319309be87b8b8c058%2Fimage.png?alt=media) 4\) Choose your 'Chart type' Select from Line, Bar or Area Charts as shown above. 5\) X & Y Axis Values Choose which values should be displayed on the X axis (e.g. time). You can have multple series per chart, so you can choose a Y-axis value for each series. Don't forget to label your series! Below for our real estate app, we've chosen the listing status field for the X axis and have added 3 series, Start price, Solid Price and Price now ![](https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-87448a8f6165ca9be4a801eaef5b5b7e212f0cfd%2Fimage.png?alt=media) {% hint style="info" %} **Working with dates on the X-Axis:** When using date fields on your X-Axis (like "Created at", "Purchase date", or "Completed on"), Noloco automatically sorts them chronologically from oldest to newest (left to right). You can then choose how to group these dates by selecting **Year**, **Quarter**, **Month**, **Week**, or **Day**. This lets you see trends at different time scales without needing separate "Month" or "Year" fields in your data. {% endhint %} 6\) Provide context by adding a chart title and subtitle ![](https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-1073e7bcdf39bf1426ff9c8cb4c07029dec8444d%2FScreenshot%202021-12-31%20at%2014.38.10.png?alt=media) Read more about Charts in Noloco 👇 {% content-ref url="../views/display/charts" %} [charts](https://guides.noloco.io/views/display/charts) {% endcontent-ref %}