# Charts

## What is a Chart?

Charts are essential data visualization tools in Squirrel. A chart, also known as a graph, is used to quickly and effectively present the relationship between two or more sets of data that the audience can easily understand and remember. They have numerous uses, as many businesses rely on data to assess priorities and formulate strategies.\
\
Examples of chart usage include evaluating overall sales and expenses over a period of time, as well as more specific instances like monitoring orders fulfilled per hour by a service at a specific location.\
\
In addition to simplifying large and complex sets of data, charts can be customized and visually enhanced to make the data more understandable. Using design elements such as axis banding, coloured categories, or even font size can impact the viewer's perception of the data.

### Learn more about...

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Area Chart</td><td></td><td></td><td><a href="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FcBsO1LLwb4ubdDzFSxgI%2FArea%20Chart.svg?alt=media&#x26;token=1c860798-e666-4b88-9122-977b17957f6c">Area Chart.svg</a></td><td><a href="charts/area-chart">area-chart</a></td></tr><tr><td>Bar Chart</td><td></td><td></td><td><a href="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FLGRjwl1wCbz1qRQKeD08%2FBar%20Chart.svg?alt=media&#x26;token=4ba8a194-371f-40b0-9394-f6efb9e63095">Bar Chart.svg</a></td><td><a href="charts/bar-chart">bar-chart</a></td></tr><tr><td>Chord Diagram</td><td></td><td></td><td><a href="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FKBoOxT9AV0sER67VFgEJ%2FChord%20Diagram.svg?alt=media&#x26;token=d8b050d2-506a-429c-b0e7-c145a075c9fa">Chord Diagram.svg</a></td><td></td></tr><tr><td>Column Chart</td><td></td><td></td><td><a href="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FnE1djVKuKp20tG1UQvQM%2FColumn%20Chart.svg?alt=media&#x26;token=bc076102-80b8-41d4-bf71-1ba9a4bb54a9">Column Chart.svg</a></td><td><a href="charts/column-chart">column-chart</a></td></tr><tr><td>Combination Chart</td><td></td><td></td><td><a href="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FWjTyfKlXu4XLZmR9gwRT%2FCombi%20Chart.svg?alt=media&#x26;token=8c5d82f8-940b-44ed-b94c-f98e02a55a66">Combi Chart.svg</a></td><td><a href="charts/combination-chart">combination-chart</a></td></tr><tr><td>Line Chart</td><td></td><td></td><td><a href="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FXaA5gnZ2PBdDOcPW3mkZ%2FLine%20Chart.svg?alt=media&#x26;token=a050b805-de36-490b-acbb-c6b438924ade">Line Chart.svg</a></td><td><a href="charts/line-chart">line-chart</a></td></tr><tr><td>Pie Chart</td><td></td><td></td><td><a href="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FXRk0h2fxvixPt99wlLLn%2FPie%20Chart.svg?alt=media&#x26;token=ecbf41a2-d905-4cc9-8a74-7c4703714bec">Pie Chart.svg</a></td><td><a href="charts/pie-chart">pie-chart</a></td></tr><tr><td>Sankey Diagram</td><td></td><td></td><td><a href="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FXHof9vew6zDM2zaHlivg%2FSankey%20Diagram.svg?alt=media&#x26;token=17374812-8340-4a05-81a5-57dd14c14265">Sankey Diagram.svg</a></td><td></td></tr><tr><td>Schedule (Gantt)</td><td></td><td></td><td><a href="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FjaJCjHYYSwkYcWec2t39%2FSchedule%20(Gantt).svg?alt=media&#x26;token=1cfd3a36-fff5-4ea5-890e-d61285bc3342">Schedule (Gantt).svg</a></td><td></td></tr><tr><td>Spline Chart</td><td></td><td></td><td><a href="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FtrUkPNUO8AsN4V7wLRgV%2FSpline%20Chart.svg?alt=media&#x26;token=367f66f6-5f4a-448b-ad28-388d1575bbdd">Spline Chart.svg</a></td><td><a href="charts/spline-chart">spline-chart</a></td></tr><tr><td>Step Chart</td><td></td><td></td><td><a href="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FMllJmdhUDUbXzW9cZtYM%2FStep%20Chart.svg?alt=media&#x26;token=59a22c92-ac1c-4fc9-b8ec-f42647809b0b">Step Chart.svg</a></td><td><a href="charts/step-chart">step-chart</a></td></tr></tbody></table>

### Plotting Data on a Chart

There are 2 ways to plot data into a Chart component:

1. Bind to datablock
2. Bind individual series

#### Binding to datablock

To bind to a data block, your spreadsheet data must be in a single block format. It should look something like this:

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2F153eRhpBtaG3Ld6U5VBh%2FDatablock.png?alt=media&#x26;token=a7c780e3-773c-4e36-8518-bbfbf224c7e3" alt=""><figcaption></figcaption></figure>

To ensure that the Chart component is set to Bind to datablock, look at the **DATA** section of the Chart component properties panel and ensure that the 'Bind to datablock' radio option is selected:

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FLKPNuIuVjOdq4AlONHt8%2FBindtodatablock.png?alt=media&#x26;token=f74d2567-3b12-4b47-a141-7f841dc73e70" alt=""><figcaption></figcaption></figure>

[Bind](https://learn.squirrel365.io/getting-started/core-concepts/data-binding) this datablock to the Chart under the **DATA** section of the properties panel. After confirming the selection in the spreadsheet, the chart will populate with the selected data.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2F7Ew8Y1zKnSqnjWmdDaFA%2FDatainchart.png?alt=media&#x26;token=582ff64d-4696-4de3-a859-debd2736436b" alt="" width="530"><figcaption></figcaption></figure>

#### Bind individual series

When binding to individual series, you can bind to single sets of data in multiple areas of the spreadsheet without the need to bind to a data block first.

The layout of the data can be changed by clicking the Switch data layout button to change the data orientation.&#x20;

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FSQJX9KJGBQwNNmnyFroa%2FSwitchdatalayout.png?alt=media&#x26;token=656faa80-ca01-49fd-8298-249763eeb688" alt=""><figcaption></figcaption></figure>
