📊Customize Charts with JSON

🧭 Overview

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

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:

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

🧩 Chart-Level Customization (Individual Styling)

Use case: Adjust the appearance of one specific chart.

Steps:

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

JSON Structure by Chart Type

Barchart

JSON Default: Barchart

{
  "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
    }

1: Axis-Label

2: Bars

3: Datalabel

4: Datazoom

5: Legends

6: Value

Linechart

JSON Default: Linechart

{
  "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
    }

1: Axis-label

2: Datalabel

3: Legends

4: Lines

5: Value

Stackedbarchart

JSON Default: Stackedbarchart

{
  "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
    }

1: Axis-label

2: Bars

3: Datalabel

4: Datazoom

5: Legends

6: Value

Barlinechart

JSON Default: Barlinechart

{ "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 }

1: Axis-label

2: Bars

3: Datalabel

4: Datazoom

5: Legends

6: Lines

7: Value

Circularchart

JSON Default: Circularchart

{ "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 }

1: Arcs

2: Categorylabel

3: Datalabel

4: Legends

5: Value

Heatmap

JSON Default: Heatmap

{ "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" }

1: Rects

2: Axislabel

3: Datalabel

4: Datazoom

Bubblechart

JSON Default: Bubblechart

{ "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 }

1: Axis-label

2: Datalabel

3: Value

Leaderboard

JSON Default: Leaderboard

{ "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 }

1: Categorylabel

2: Legends

3: Value

Last updated 9 months ago

Was this helpful?