# Charting in Thunkable

## Setting URL Parameters in Thunkable

Now that we know what URL parameters are, we can start creating blocks in our project to dynamically update the parameters. To do this we'll use the Text blocks, and in particular the Join block, to change out each of our variables.

### Overview

{% hint style="success" %}
**Remix Link:** [**https://x.thunkable.com/projectPage/6227740a29e8cb0010e04e5d**](https://x.thunkable.com/projectPage/6227740a29e8cb0010e04e5d)
{% endhint %}

To recreate the UI for this app you can add an image and a button - click on the remix button to add the UI and blocks for this project to your Thunkable account.

### Block it Out

Drag an image component onto the screen. The chart URL will be used as the image source. The URL should be set in your blocks unless you plan to have a static chart image, in which case you may set the image source on the design screen. 

* Drag an image component to the screen
* Go to your blocks
* Following some user or system generated action, set the url for the image component using the Quickchart API **base URL** provided while saving your chart
* All chart updates will be made by appending text `join blocks` to the image source URL. 

<figure><img src="/files/SEpG03NMhLQrRRViIVAs" alt=""><figcaption></figcaption></figure>

## Use the no-code chart API <a href="#use-the-no-code-chart-api" id="use-the-no-code-chart-api"></a>

Currently, three aspects of your chart can be overriden with custom values:

1. Chart title
2. Dataset labels
3. Data

These customizations are passed as URL parameters. For example, to override chart title, take the base URL and add the following:

```
?title=New title
```

<figure><img src="/files/vC68ArBB7YFWbWLwmHOe" alt=""><figcaption></figcaption></figure>

You can join URL parameters together using the **&** symbol. For example:

```
?title=New title&labels=Q1,Q2,Q3,Q4
```

<figure><img src="/files/VKH1XLk7YTs0nkxQsKNz" alt=""><figcaption></figcaption></figure>

To override data, use **data1**, **data2**, **data3**, …, for each dataset on the chart.

For example, to override the first (primary) dataset:

```
?data1=40,60,80,100
```

<figure><img src="/files/3NmhoEr6VbIVPNa2GNFQ" alt=""><figcaption></figcaption></figure>

To override multiple datasets and the chart title:

```
?data1=40,60,80,100&data2=5,6,7,8&title=Updated chart

```

<figure><img src="/files/QahtK4q7o4tlqIhoRXuv" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.thunkable.com/blocks/advanced-app-features/web-api/charting-apis/charting-in-thunkable.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.