📊Customize Charts with JS

🧭 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.

Chart Level

App Level

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 2 days ago

Was this helpful?