# Customize Charts with JSON

<figure><img src="/files/T1Mtyool7TOg0q1OJZui" alt="" width="375"><figcaption></figcaption></figure>

### 🧭 Overview <a href="#overview" id="overview"></a>

JSON Prefilled Code Mode allows you to personalize your charts by directly editing pre-filled JSON templates.\
Instead of writing CSS or code from scratch, you simply adjust structured JSON values such as colors, fonts, sizes, borders, and spacing.

* **App-level JSON**: applies global styling across all chart types.
* **Chart-level JSON**: applies specific styling to a single chart (only the relevant section of code is included).

This feature makes customization accessible for everyone - from builders to non-technical users -while maintaining brand consistency and readability across dashboards.

The feature is available for the following chart designs:

* New Heatmap
* New Barchart
* New Linechart
* New Bubblechart
* New Leaderboard
* New Barlinechart
* New Circularchart
* New Stackedbarchart

***

### How It Works <a href="#how-it-works" id="how-it-works"></a>

* Open the **Customization panel** at the app level to apply bulk styling.
* Open a specific chart’s **Chart configuration → Style tab** to edit chart-level JSON.
* Modify the JSON properties. Changes are instantly reflected in your charts.
* Built-in **error detection** will alert you if something is misconfigured.

#### ✨ App-Level Customization (Global Styling)

**Use case:** Apply a unified look across all charts in your app for brand consistency.

**Steps:**

1. Go to your app’s **Customization** panel.
2. Find the **JSON styling section**.
3. Edit the JSON (fonts, colors, borders, etc.).
4. Save and apply — changes will reflect on all supported charts.

{% @arcade/embed url="<https://app.arcade.software/share/AeTpxd84xO2tvG4Mm0MC>" flowId="AeTpxd84xO2tvG4Mm0MC" %}

#### 🧩 Chart-Level Customization (Individual Styling)

**Use case:** Adjust the appearance of one specific chart.

**Steps:**

1. Open your **chart configuration**.
2. Got to **style** tab.
3. Enter or adjust the pre-filled JSON.
4. Save to apply changes to that chart only.

{% @arcade/embed url="<https://app.arcade.software/share/AhRccIxR2dke1qj6nJHq>" flowId="AhRccIxR2dke1qj6nJHq" %}

***

### JSON Structure by Chart Type <a href="#json-structure-by-chart-type" id="json-structure-by-chart-type"></a>

### Barchart <a href="#barchart" id="barchart"></a>

<details>

<summary>JSON Default: Barchart</summary>

```
{
  "barchart": {
    "axisLabel": {
      "fontSize": 12,
      "fontWeight": 500,
      "color": "#172134"
    },
    "bars": {
      "minWidth": 16,
      "minWidthCompact": 8,
      "maxWidth": 110,
      "maxWidthCompact": 55,
      "borderRadius": 5,
      "gap": 16,
      "gapCompact": 8,
      "crossfilterShadowBlur": 10,
      "lighterColorPercent": 0.45
    },
    "dataLabel": {
      "borderRadius": 4,
      "minWidth": 304,
      "minWidthCompact": 200
    },
    "dataZoom": {
      "backgroundColor": "#F0F1F4",
      "color": "#88B2A8"
    },
    "legends": {
      "fontSize": 14,
      "fontWeight": 500
    },
    "value": {
      "color": "#172134",
      "fontSize": 12,
      "fontSizeCompact": 12,
      "fontWeight": 600,
      "fontWeightCompact": 600
    }
```

</details>

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

1: Axis-Label

2: Bars

3: Datalabel

4: Datazoom

5: Legends

6: Value

***

### Linechart <a href="#linechart" id="linechart"></a>

<details>

<summary>JSON Default: Linechart</summary>

```
{
  "linechart": {
    "axisLabel": {
      "fontSize": 12,
      "fontWeight": 500,
      "color": "#172134"
    },
    "dataLabel": {
      "borderRadius": 4,
      "minWidth": 304,
      "minWidthCompact": 200
    },
    "legends": {
      "fontSize": 14,
      "fontWeight": 500
    },
    "lines": {
      "width": 3,
      "smooth": true
    },
    "value": {
      "color": "#172134",
      "fontSize": 12,
      "fontSizeCompact": 12,
      "fontWeight": 600,
      "fontWeightCompact": 600
    }
```

</details>

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

1: Axis-label

2: Datalabel

3: Legends

4: Lines

5: Value

***

### Stackedbarchart <a href="#stackedbarchart" id="stackedbarchart"></a>

<details>

<summary>JSON Default: Stackedbarchart</summary>

```
{
  "stacked-barchart": {
    "axisLabel": {
      "fontSize": 12,
      "fontWeight": 500,
      "color": "#172134"
    },
    "bars": {
      "minWidth": 16,
      "minWidthCompact": 8,
      "maxWidth": 110,
      "maxWidthCompact": 55,
      "borderRadius": 5,
      "gap": 16,
      "gapCompact": 8,
      "crossfilterShadowBlur": 10,
      "lighterColorPercent": 0.45
    },
    "dataLabel": {
      "borderRadius": 4,
      "minWidth": 304,
      "minWidthCompact": 200
    },
    "dataZoom": {
      "backgroundColor": "#F0F1F4",
      "color": "#88B2A8"
    },
    "legends": {
      "fontSize": 14,
      "fontWeight": 500
    },
    "value": {
      "color": "#172134",
      "fontSize": 12,
      "fontSizeCompact": 12,
      "fontWeight": 600,
      "fontWeightCompact": 600
    }
```

</details>

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

1: Axis-label

2: Bars

3: Datalabel

4: Datazoom

5: Legends

6: Value

***

### Barlinechart <a href="#stackedbarchart" id="stackedbarchart"></a>

<details>

<summary>JSON Default: Barlinechart</summary>

{\
"barlinechart": {\
"axisLabel": {\
"fontSize": 12,\
"fontWeight": 500,\
"color": "#172134"\
},\
"bars": {\
"minWidth": 16,\
"minWidthCompact": 8,\
"maxWidth": 110,\
"maxWidthCompact": 55,\
"borderRadius": 5,\
"gap": 16,\
"gapCompact": 8,\
"crossfilterShadowBlur": 10,\
"lighterColorPercent": 0.45\
},\
"dataLabel": {\
"borderRadius": 4,\
"minWidth": 304,\
"minWidthCompact": 200\
},\
"dataZoom": {\
"backgroundColor": "#F0F1F4",\
"color": "#88B2A8"\
},\
"legends": {\
"fontSize": 14,\
"fontWeight": 500\
},\
"lines": {\
"width": 3,\
"smooth": true\
},\
"value": {\
"color": "#172134",\
"fontSize": 12,\
"fontSizeCompact": 12,\
"fontWeight": 600,\
"fontWeightCompact": 600\
}

</details>

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

1: Axis-label

2: Bars

3: Datalabel

4: Datazoom

5: Legends

6: Lines

7: Value

***

### Circularchart <a href="#stackedbarchart" id="stackedbarchart"></a>

<details>

<summary>JSON Default: Circularchart</summary>

{\
"circularchart": {\
"arcs": {\
"borderRadius": 4,\
"borderRadiusCompact": 2,\
"legendLineWidth": 36,\
"lighterColorPercent": 0.45\
},\
"categoryLabel": {\
"color": "#172134",\
"fontSize": 16,\
"fontSizeCompact": 14,\
"fontWeight": 600,\
"fontWeightCompact": 400\
},\
"dataLabel": {\
"borderRadius": 4,\
"minWidth": 304,\
"minWidthCompact": 200\
},\
"legends": {\
"fontSize": 14,\
"fontWeight": 500\
},\
"value": {\
"color": "#172134",\
"fontSize": 12,\
"fontSizeCompact": 12,\
"fontWeight": 600,\
"fontWeightCompact": 600\
}

</details>

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

1: Arcs

2: Categorylabel

3: Datalabel

4: Legends

5: Value

***

### Heatmap <a href="#stackedbarchart" id="stackedbarchart"></a>

<details>

<summary>JSON Default: Heatmap</summary>

{\
"heatmap": {\
"rects": {\
"borderRadius": 8,\
"strokeLineWidth": 3,\
"strokeColor": "#525E75",\
"valueFontSize": 16,\
"valueFontWeight": 600,\
"subValueFontSize": 12,\
"subValueFontWeight": 600\
},\
"axisLabel": {\
"fontSize": 12,\
"fontWeight": 500,\
"color": "#172134"\
},\
"dataLabel": {\
"borderRadius": 4,\
"minWidth": 304,\
"minWidthCompact": 200\
},\
"dataZoom": {\
"backgroundColor": "#F0F1F4",\
"color": "#88B2A8"\
}

</details>

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

1: Rects

2: Axislabel

3: Datalabel

4: Datazoom

***

### Bubblechart <a href="#stackedbarchart" id="stackedbarchart"></a>

<details>

<summary>JSON Default: Bubblechart</summary>

{\
"bubblechart": {\
"axisLabel": {\
"fontSize": 12,\
"fontWeight": 500,\
"color": "#172134"\
},\
"dataLabel": {\
"borderRadius": 4,\
"minWidth": 304,\
"minWidthCompact": 200\
},\
"value": {\
"color": "#172134",\
"fontSize": 12,\
"fontSizeCompact": 12,\
"fontWeight": 600,\
"fontWeightCompact": 600\
}

</details>

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

1: Axis-label

2: Datalabel

3: Value

***

### Leaderboard <a href="#stackedbarchart" id="stackedbarchart"></a>

<details>

<summary>JSON Default: Leaderboard</summary>

{\
"leaderboard": {\
"categoryLabel": {\
"fontSize": 16,\
"fontSizeCompact": 14,\
"fontWeight": 600,\
"fontWeightCompact": 400\
},\
"legends": {\
"fontSize": 14,\
"fontWeight": 500\
},\
"value": {\
"color": "#172134",\
"fontSize": 12,\
"fontSizeCompact": 12,\
"fontWeight": 600,\
"fontWeightCompact": 600\
}

</details>

<figure><img src="/files/19fvpObTkQiovDHf9Cf9" alt=""><figcaption></figcaption></figure>

1: Categorylabel

2: Legends

3: Value


---

# 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-v3.toucantoco.com/visualizations-and-layouts/creating-visualizations/customize-charts/customize-charts-with-js.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.