Using QuickChart in your apps

Thanks so much for getting back to me. I find that the url works fine except when I include plug-ins. Below is the key part of the URL I’ve been using… if you know a way/can see where I’m going wrong, that would be fantastic…

{
type: ‘bar’,
data: {
labels: [‘Q1’, ‘Q2’, ‘Q3’, ‘Q4’],
datasets: [
{
label: ‘Users (thousands)’,
data: [50, 60, 70, 180],
backgroundColor: ‘rgba(54, 162, 235, 0.5)’,
borderColor: ‘rgb(54, 162, 235)’,
borderWidth: 1,
},
],
},
options: {
plugins: {
datalabels: {
anchor: ‘end’,
align: ‘top’,
color: ‘#fff’,
backgroundColor: ‘rgba(34, 139, 34, 0.6)’,
borderColor: ‘rgba(34, 139, 34, 1.0)’,
borderWidth: 1,
borderRadius: 5,
formatter: (value) => {
return value + ‘k’;
},
},
},
},
}

Try this instead.

{
type: ‘bar’,
data: {
labels: [‘Q1’, ‘Q2’, ‘Q3’, ‘Q4’],
datasets: [
{
label: ‘Users (thousands)’,
data: [50, 60, 70, 180],
backgroundColor: ‘rgba(54, 162, 235, 0.5)’,
borderColor: ‘rgb(54, 162, 235)’,
borderWidth: 1,
},
],
},
options: {
plugins: {
datalabels: {
anchor: ‘end’,
align: ‘top’,
color: ‘white’,
backgroundColor: ‘rgba(34, 139, 34, 0.6)’,
borderColor: ‘rgba(34, 139, 34, 1.0)’,
borderWidth: 1,
borderRadius: 5,
formatter: (value) => {
return value + ‘k’;
},
},
},
},
}

Same result I’m afraid, I use the same URL with the "https://quickchart.io/chart?c= at the front and " at the end in an image field and it works fine without the options - plugins part, but gives an error otherwise…

{
type: ‘bar’,
data: {
labels: [‘Q1’,‘Q2’,‘Q3’,‘Q4’],
datasets: [{
label: ‘Users (thousands)’,
data: [50, 60, 70, 180],
fill: false,
borderColor: ‘rgba(54, 162, 235, 0.5)’,
backgroundColor: ‘rgb(54, 162, 235)’,
}]
},
options: {
plugins: {
datalabels: {
display: true,
anchor:‘end’,
align: ‘top’,
backgroundColor: ‘rgba(34, 139, 34, 0.6)’,
borderColor: ‘rgba(34, 139, 34, 1.0)’ ,
borderWidth: 1,
borderRadius: 5
},
}
}
}

2 Likes

SO GOOD!! Thanks so much for that - really has made my day. With those small tweaks it now allows me to put a picture behind it too. Only remaining question - I’ve been trying to use a picture saved in a google drive but that doesn’t seem to work, do you know if there’s a way around that too?

1 Like

Probably like this?

{
type: ‘bar’,
data: {
labels: [‘Q1’,‘Q2’,‘Q3’,‘Q4’],
datasets: [{
label: ‘Users (thousands)’,
data: [50, 60, 70, 180],
fill: false,
borderColor: ‘rgba(54, 162, 235, 0.5)’,
backgroundColor: ‘rgb(54, 162, 235)’,
}]
},
options: {
plugins: {
datalabels: {
display: true,
anchor:‘end’,
align: ‘top’,
backgroundColor: ‘rgba(34, 139, 34, 0.6)’,
borderColor: ‘rgba(34, 139, 34, 1.0)’ ,
borderWidth: 1,
borderRadius: 5,
},
backgroundImageUrl: ‘https://pyxis.nymag.com/v1/imgs/dc5/011/2ea57ca9a7a5d9518b2f3cd94ccdde218f-25-emoji-subpoena.rsocial.w1200.jpg’,
}
}
}

image

2 Likes