😍 Quickchart.io: the Cloudinary of Charts —on the fly charts!

Their support is truly amazing.

1 Like

Wow. Just wow. Thank you ^6

Anyone figure out how to put an image inside of a radial chart? I want to achieve this:

4 Likes

No, but I have a potential use case for this, so if you figure it out I’d love to know :grin:

I’m getting close!

Just that it’s tiling and not centering/filling:

https://quickchart.io/chart?bkg=white&c={ type: ‘radialGauge’, data: { datasets: [{ data: [50], backgroundColor: ‘rgb(0,13,30)’ }] }, options: { trackColor: ‘rgb(207,207,207)’, centerPercentage: 70, centerArea: { fontSize: 25, backgroundColor: getImageFill(‘https://pyxis.nymag.com/v1/imgs/1be/59b/387489f1b8413ff360c3eead07c710621c-polar-bears.rsquare.w100.jpg’), }, },}

4 Likes

I GOT IT!

9 Likes

:boom:

I was trying, but I guess I didn’t realize how the ‘options’ part worked. Nice work!

1 Like

I’m really close! Just issues with scaling:

4 Likes

Bring Cloudinary in to help with the scaling perhaps?

I’d looove to

Wouldn’t this be 100%?

Nope. That parameter determines how much center there is ( which impacts how thick the radial progress bar appears).

Yep. That’s what I’m going to have to do. I’ll need to add a c_pad parameter to give it padding and then it should work.

1 Like

Got it

OMG it’s BEAUTIFUL:

14 Likes

Man, you are a genius!

1 Like

That’s really nice. I wonder if you could put a radial gauge inside another radial gauge to get an Apple Fitness Rings effect?

Also, could you share the URL construct?

4 Likes

:clap: :heart_eyes:

Tutorial:

Quickcharts Raw Code
  type: 'radialGauge',
  data: { datasets: [{ data: [_P_], borderWidth:0,backgroundColor: '#COLOR' }] },
  options: { 
trackColor: '#eee',
    roundedCorners:true,
    centerPercentage: 85,
    centerArea: {
      fontSize: 1,
    },
    plugins: {
      backgroundImageUrl: '_$_', 
    }
  },
}
Quickcharts % Encoded

https://quickchart.io/chart?bkg=transparent&c=%7B%0A%20%20type%3A%20%27radialGauge%27%2C%0A%20%20data%3A%20%7B%20datasets%3A%20%5B%7B%20data%3A%20%5B_P_%5D%2C%20borderWidth%3A0%2CbackgroundColor%3A%20%27%23COLOR%27%20%7D%5D%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20trackColor%3A%20%27%23eee%27%2C%0A%20%20%20%20roundedCorners%3Atrue%2C%0A%20%20%20%20centerPercentage%3A%2085%2C%0A%20%20%20%20centerArea%3A%20%7B%0A%20%20%20%20%20%20fontSize%3A%201%2C%0A%20%20%20%20%7D%2C%0A%20%20%20%20plugins%3A%20%7B%0A%20%20%20%20%20%20backgroundImageUrl%3A%20%27_$_%27%2C%20%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%7D

Cloudinary Template
https://res.cloudinary.com/glide/image/fetch/c_pad,w_500,h_300/@
18 Likes