outlabeledDoughnut size increase not working

1

Hi,

I am using api to generate doughnut chart.

I am sending width, height in the end point but it is not increasing the size of the file. I also tried devicePixelRatio but no effect.

https://quickchart.io/chart?encoding=url&backgroundColor=transparent&width=2000&height=1200&devicePixelRatio=1.0

I even tried using devicePixelRatio to 5, but file width and height does not change.

Can you please suggest what wrong I am doing here? Thanks

{
   "chart":{
      "type":"outlabeledDoughnut",
      "data":{
         "labels":[
            "Gas",
            "Diesel",
            "Non-n-renewablenelectricity",
            "Renewablen energy"
         ],
         "datasets":[
            {
               "data":[10,20,20,10],
               "backgroundColor":[
                  "rgb(0,145,179)",
                  "rgb(147,149,152)",
                  "rgb(239,236,235)",
                  "rgb(0,114,152)"
               ]
            }
         ]
      },
      "options":{
         "cutoutPercentage":60,
         "legend":{
            "display":false
         },
         "plugins":{
            "legend":false,
            "datalabels":{
               "display":false
            },
            "doughnutlabel":{
               "labels":[
                  {
                     "text":"60%",
                     "font":{
                        "size":20,
                        "family":"Gotham Rounded Book"
                     }
                  },
                  {
                     "text":"Renewable",
                     "font":{
                        "size":10
                     }
                  },
                  {
                     "text":"energy",
                     "font":{
                        "size":10,
                        "family":"Gotham Rounded Medium"
                     }
                  }
               ]
            },
            "outlabels":{
               "text":"%l",
               "color":"#939598",
               "backgroundColor":"#fff",
               "stretch":20,
               "font":{
                  "resizable":true,
                  "minSize":12,
                  "maxSize":18,
                  "family":"Gotham Rounded Medium"
               }
            }
         }
      }
   }
}
2

Hi @ankitwalia4u,

Are you using the POST endpoint? If so, you must specify width, height, devicePixelRatio, and other parameters in your JSON payload, not as query parameters.

See POST endpoint documentation here: Documentation

{
   "width": 2000,
   "height": 1200,
   "devicePixelRatio": 1.0,
   "backgroundColor": "transparent",
   "chart":{
      "type":"outlabeledDoughnut",
      "data":{
         "labels":[
            "Gas",
            "Diesel",
            "Non-n-renewablenelectricity",
            "Renewablen energy"
         ],
         "datasets":[
            {
               "data":[10,20,20,10],
               "backgroundColor":[
                  "rgb(0,145,179)",
                  "rgb(147,149,152)",
                  "rgb(239,236,235)",
                  "rgb(0,114,152)"
               ]
            }
         ]
      },
      "options":{
         "cutoutPercentage":60,
         "legend":{
            "display":false
         },
         "plugins":{
            "legend":false,
            "datalabels":{
               "display":false
            },
            "doughnutlabel":{
               "labels":[
                  {
                     "text":"60%",
                     "font":{
                        "size":20,
                        "family":"Gotham Rounded Book"
                     }
                  },
                  {
                     "text":"Renewable",
                     "font":{
                        "size":10
                     }
                  },
                  {
                     "text":"energy",
                     "font":{
                        "size":10,
                        "family":"Gotham Rounded Medium"
                     }
                  }
               ]
            },
            "outlabels":{
               "text":"%l",
               "color":"#939598",
               "backgroundColor":"#fff",
               "stretch":20,
               "font":{
                  "resizable":true,
                  "minSize":12,
                  "maxSize":18,
                  "family":"Gotham Rounded Medium"
               }
            }
         }
      }
   }
}
3

Thank you Ian, sorry to miss the documentation

4

I have written code like this. But still I am not able to see some labels[THREE, FOUR}, Height is not getting increased. Can you please provide solution for this

Quickchart
Quickchart1318×552 42.2 KB 

{
  width: 2000,
  height: 1200,
  devicePixelRatio: 1.0,
  type: 'outlabeledDoughnut',
  data: {
    labels: ['ONE', 'TWO', 'THREE', 'FOUR', 'FIVE'],
    datasets: [
      {
        backgroundColor: [
          '#FF3784',
          '#36A2EB',
          '#4BC0C0',
          '#F77825',
          '#9966FF',
        ],
        data: [1, 1, 1, 2, 90],
      },
    ],
  },
  options: {
    plugins: {
      legend: false,
      outlabels: {
        text: '%l %p',
        color: '#000',
        backgroundColor: '#fff',
        stretch: 35,
        font: {
          resizable: true,
          minSize: 12,
          maxSize: 18,
        },
      },
    },
  },
};
5

Hi @Guru,

Have a look at the API parameters documentation. Width, height, and devicePixelRatio go in the URL, not the chart config.

In the sandbox, you can also change width & height by clicking ‘Chart Settings’.

Hope this helps!