Formatter not working when using API

1

Hi,

I am calling https://quickchart.io/chart/create/ API from postman with this JSON

{
   "chart":{
      "type":"doughnut",
      "data":{
         "labels":[
            "Gas",
            "Diesel",
            "Non-renewable electricity",
            "Renewable energy"
         ],
         "datasets":[
            {
               "data":[
                  10,
                  15,
                  30,
                  80
               ],
               "backgroundColor":[
                  "rgb(0, 145, 179)",
                  "rgb(147, 149, 152)",
                  "rgb(239, 236, 235)",
                  "rgb(0, 114, 152)"
               ]
            }
         ]
      },
      "options":{
            "legend":{
               "display":false
            },
            "plugins":{
            	"datalabels":{
            		"display": true,
            		"formatter": "(val, ctx) => {return ctx.chart.data.labels[ctx.dataIndex];}",
            		"color": "#fff",
            		"backgroundColor": "#404040"
            	},
            	"doughnutlabel":{
            		"labels":[{"text":"64%","font":{"size": 40,"weight":"bold"}},{"text":"Renewable","font":{"size": 20}},{"text":"energy", "font":{"size": 20}}]
            	}
            }
      }
   }
}

My doughnut kept showing the value not label.
When I tried to change the formatter return with any static value, it did not work.

I am not sure how can I use formatter when using HTTP post.
Can you correct if the above is not the right way of doing the same.

2

Hi @ankitwalia4u,

To solve this, don’t make the formatter function a string. Instead, pass the entire chart config as a string of javascript code.

See Using JS functions for more detail on this topic!

For example:

{
  "width": 600,
  "height": 300,
  "devicePixelRatio": 1.0,
  "chart": "{\"type: doughnut\", ...}"
}