# Quickchart Data Replacement (Template)

**URL:** <https://community.glideapps.com/t/quickchart-data-replacement-template/58227>\
**Category:** Ask for Help\
**Created:** [February 21, 2023, 7:42am UTC](https://community.glideapps.com/t/quickchart-data-replacement-template/58227 "2023-02-21T07:42:06Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [February 21, 2023, 8:00am UTC](https://community.glideapps.com/t/quickchart-data-replacement-template/58227/3 "2023-02-21T08:00:51Z")

</div>

The easiest way to work with quickcharts is in the sandbox editor.

If you [open your chart in the sandbox](https://quickchart.io/sandbox#%7B%22chart%22%3A%22%7B%5Cn%20%20type%3A%20'doughnut'%2C%5Cn%20%20data%3A%20%7B%5Cn%20%20%20%20datasets%3A%20%5B%5Cn%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20data%3A%20%5B24%2C%2025%2C%2026%5D%2C%5Cn%20%20%20%20%20%20%20%20backgroundColor%3A%20%5B'green'%2C%20'yellow'%2C%20'red'%5D%2C%5Cn%20%20%20%20%20%20%20%20label%3A%20'Dataset%201'%2C%5Cn%20%20%20%20%20%20%20%20borderWidth%3A%2010%2C%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%5D%2C%5Cn%20%20%20%20labels%3A%20%5B'A'%2C%20'B'%2C%20'C'%5D%2C%5Cn%20%20%7D%2C%5Cn%20%20options%3A%20%7B%5Cn%20%20%20%20circumference%3A%20Math.PI%2C%5Cn%20%20%20%20rotation%3A%20Math.PI%2C%5Cn%20%20%20%20cutoutPercentage%3A%2075%2C%5Cn%20%20%20%20layout%3A%20%7B%5Cn%20%20%20%20%20%20padding%3A%2040%2C%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20legend%3A%20%7B%5Cn%20%20%20%20%20%20display%3A%20false%2C%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20plugins%3A%20%7B%5Cn%20%20%20%20%20%20datalabels%3A%20%7B%5Cn%20%20%20%20%20%20%20%20color%3A%20'%23000'%2C%5Cn%20%20%20%20%20%20%20%20anchor%3A%20'end'%2C%5Cn%20%20%20%20%20%20%20%20align%3A%20'end'%2C%5Cn%20%20%20%20%20%20%20%20formatter%3A%20(val)%20%3D%3E%20val%20%2B%20'%25'%2C%5Cn%20%20%20%20%20%20%20%20font%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20size%3A%2025%2C%5Cn%20%20%20%20%20%20%20%20%20%20weight%3A%20'bold'%2C%5Cn%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20doughnutlabel%3A%20%7B%5Cn%20%20%20%20%20%20%20%20labels%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20'%5C%5CnYou%20are%20at'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20font%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20size%3A%2020%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20'%5C%5Cn24%25'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20'%23000'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20font%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20size%3A%2040%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20weight%3A%20'bold'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%5D%2C%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%7D%2C%5Cn%20%20%7D%2C%5Cn%7D%22%2C%22width%22%3A500%2C%22height%22%3A300%2C%22version%22%3A%222%22%2C%22backgroundColor%22%3A%22%23fff%22%7D), you’ll see something like this:

 ![CleanShot 2023-02-21 at 15.51.39@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/7/f7f40b4ef735a436c942ff9a77c14400ff8b22ec.jpeg)

Presumably, the bit you want to customise is the data value. So to do that, paste the following into a template column:

```auto
{
  type: 'radialGauge',
  data: {
    datasets: [
      {
        data: [{data}],
        backgroundColor: getGradientFillHelper('horizontal', ['#3bc37b', '#c0ebd4']),
        
      },
    ],
  },
  options: {
    // See https://github.com/pandameister/chartjs-chart-radial-gauge#options
    domain: [0, 100],
    trackColor: '#f0f8ff',
    centerPercentage: 80,
    centerArea: {
      text: (val) => val + '%',
      fontFamily: 'Calibri'
    },
  },
}

```

…and replace `{data}` with your own value.

Then create a Construct URL column as follows:

 ![CleanShot 2023-02-21 at 15.59.12@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/f/1f872cb8f0a64f9da886cef43dcc5977b3dcb33a.png)

(where tpChart is your template column)

And then use the Construct URL column in an Image Component:

 ![CleanShot 2023-02-21 at 15.59.28@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/c/1ceac1881905e98aaba17325630fd0793a5bbbdb.png)

---

_[View the full topic](https://community.glideapps.com/t/quickchart-data-replacement-template/58227)._