How to modify sub properties in dynamic charts

I am using the nocode chart builder. I would like to modify the fontSize or any other sub property

I know i can change title by sending &title=new text in the url. But i’ve also tried sending something like &titleFontSize=40 and &data1Color=purple and these dont change the ‘sub properties’.

Changing the data array and chart title is easy enough. do we have access to the other properties when we’ve made the chart api template?

Hi Jared,

Currently this isn’t possible using the no-code template API. Replacing title and data are common operations, but we haven’t added query parameters for every sub-option.

If you want to heavily customize parts of your chart, it may be best to use the standard API instead of the no-code API. It will require you to edit a JSON config, though.

You can export your no-code chart to a Chart.js config by adding ?format=raw to your no-code endpoint.
For example:

https://quickchart.io/chart/render/9a560ba4-ab71-4d1e-89ea-ce4741e9d232
becomes
https://quickchart.io/chart/render/9a560ba4-ab71-4d1e-89ea-ce4741e9d232?format=raw

Then, extract the “chart” value from the raw JSON:

{"type":"bar","data":{"labels":["Hello","World"],"datasets":[{"label":"Foo","data":[1,2]}]}}

This can be pasted directly into the chart sandbox to try out different customization options (you can use a formatter to make the JSON more readable).

When you generate the chart URL in your app, you can override data, title, colors, and any other option to look how you want.

Hope this helps, but also happy to help out with a specific example.

2 Likes

This makes sense. Thank you!

This is great :+1:
I tried the Chart Maker several months ago, but I ended up going back to the sandbox editor because I couldn’t see any obvious way to modify a template.

EXACTLY what i was looking for. thank you!

We’ve just added an “Export chart to full editor” button under the Advanced tab:

This should make things a bit easier!

1 Like

hey @ian

I just gave this a try, and found that all of the double-quotes are escaped in the generated JSON, which causes it to break when pasted into the sandbox. Here is what it looks like:

My chartmaker template URL: https://quickchart.io/chart/render/zm-488a2733-1a31-4182-8d40-5ea6652604e3?title=PM%20Productivity%20Time%20Lost%20(mins)&data1=3022%2C6081%2C796&format=raw

Anything that I can do to fix that, other than search and replace?

The easiest way is honestly to just set it as a string in a Javascript repl. For example:

x = "{\"type\": ..."
console.log(x)

Here’s a link to your chart in the sandbox: link

1 Like

hehe, okay.
yes, that does the trick :slight_smile:
Thanks :+1: