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

Community Resources
41

I see some other examples which look pretty neat too.

42

I tried to customize it, change center number default and color, but didn’t find the code for this.

43

@Lucas_Pires https://github.com/pandameister/chartjs-chart-radial-gauge#options Is this it?

44

Well, I saw it too. But I mean to change it directly in the url like we can do it

45

Ahh I see. Thanks

46

It gave back an error image?

47

In the url properties they offers, there’s no option to change the center label for exemple…

48

Do you mean changing the text or the position?

49

Everything lol

But the Max value. The pattern is 100…

50

Can you have a draft of what you want your chart to look like? When I have time tomorrow I will jump into their sandbox page to try creating a demo URL.

51

Well, this almost the same, i was just thinking about changing the center Max label because they offers just url and we can use as images too

Like

https://quickchart.io/chart?c={type:'radialGauge',data:{datasets:[{data:[70],backgroundColor:'green'}]}}

52

Check out the options here if that helps:

I tried this just today but the animation doesn’t work. Other things work fine.

53

Thanks @ThinhDinh, but that’s the same link @Rosewebstudio sent here up and didnt work a way to use in those url

Lol anyway, I’ve could use the way it is

Today I’ll share more about it :relaxed:

image

54

Yeah, I’ve tried too. I managed to adjust the color of the ring, but have been unsuccessful with size/color.

55

By the way, the creators of Quickchart are responsive to user feedback. This progress bar chart was created two days after I requested one :wink:

Screen Shot 2020-10-07 at 11.18.19 AM

56

I swear I have been able to do it today. Probably I read a chart.js doc instead of what they had on Quickchart.io.

Like this?

image
image359×684 52.6 KB

57

For the half doughnut chart:

  https://quickchart.io/chart?bkg=transparent&w=600&h=400&c={
  "type": "doughnut",
  "data": {
    "datasets": [{
      "label": "foo",
      "data": [{MC}, {MIC}],
      "backgroundColor": [
        "green",
        "#C0C0C0"
      ],
      "textcolor":["#000555","#555555"],
      "borderWidth": 0,
    }] 
  },
  "options": {
    "rotation": Math.PI,
    "circumference": Math.PI,
    "cutoutPercentage": 75,
    "plugins": {
      "datalabels": { "display": false },
      "doughnutlabel": {
        "labels": [
          {
            "text": "{PE}25",
            "color":"#FFF",
            "font": {
              "size": "45",
              "weight":"bold",
            },
          },
          {
            "text": "\n{MC}/{TO} completed milestones",
            "color":"#FFF",
            "font": {
              "size": "25"
            },
          },
        ]
      }
    }		
  }
}
58

For the doughnut chart:

https://quickchart.io/chart?bkg=transparent&w=500&h=400&c={
  type: 'doughnut',
  data: {
labels: ['Vision Boards','Journals','Role Models'],
datasets: [{
  data: [{VB},{JO},{RM}],
  backgroundColor: ['#84ab84'
,'#c9a985','#e3adb8'],
}]
  },
  options: {
legend: { 
    position: 'right',
    align: 'middle',
    color: '#fff',
    labels: {
    fontColor: "white",
    fontSize: 14
            }
        },
plugins: {
  datalabels: {
    display: true,
    borderRadius: 3,
    color: '#fff',
    font: {
      backgroundColor: 'transparent',
      size: 15,
      weight: 'bold'
    }
  },
  doughnutlabel: {
    labels: [{
      text: '{TO}',
      color: '#fff',
      font: {
        backgroundColor: 'transparent',
        size: 40,
        weight: 'bold'
      }
    }, {
      text: 'items',
      color: '#fff',
    }]
  }
}
  }
}
59

Radial:
https://quickchart.io/chart?c={type:%27radialGauge%27,data:{datasets:[{data:[70],backgroundColor:%27green%27}]},options:{centerArea:{fontSize:100,fontColor:%27green%27}}}

image
image733×680 37 KB

60

Gorgeous. :star_struck: