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

[Rosewebstudio]

I see some other examples which look pretty neat too.

Chartjs Radial Gauge Chart Samples

[Lucas_Pires]

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

[Rosewebstudio]

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

[Lucas_Pires]

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

[Rosewebstudio]

Ahh I see. Thanks

[ThinhDinh]

It gave back an error image?

[Lucas_Pires]

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

[ThinhDinh]

Do you mean changing the text or the position?

[Lucas_Pires]

Everything lol

But the Max value. The pattern is 100…

[ThinhDinh]

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.

[Lucas_Pires]

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'}]}}

[ThinhDinh]

Check out the options here if that helps:

pandameister/chartjs-chart-radial-gauge

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

[Lucas_Pires]

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

[Robert_Petitto]

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

[Robert_Petitto]

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

[ThinhDinh]

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?

[ThinhDinh]

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"
            },
          },
        ]
      }
    }		
  }
}

[ThinhDinh]

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',
    }]
  }
}
  }
}

[Robert_Petitto]

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

[Deena]

Gorgeous.