Formatting doughnut/pie chart labels

1

A couple people have asked me recently about altering their doughnut charts. The easiest way to do this is with the chartjs-plugin-datalabels plugin, which is automatically included in all QuickChart renders.

See this post for more information on customizing doughnut and pie charts.

Here’s an example:

{
  type: 'doughnut',
  data: {
    datasets: [
      {
        data: [10, 20, 15, 5, 50],
      },
    ],
    labels: ['A', 'B', 'C', 'D', 'E'],
  },
  options: {
    plugins: {
      datalabels: {
        formatter: (value) => {
          return value + '%';
        }
      }
    }
  }
}

Feel free to respond to this post if you have more questions about customizing your doughnut and pie charts.

1 Like
2

image

Fantastic! :heart_eyes:

This is definitely something I’ll be making use of! Thank you so much!

1 Like
3

Hello!

I’m trying to replicate this in Python. I can’t add

formatter: (value) => {
          return value + '%';
        }

this in a dict for obvious reasons. I know I can pass the config as a string, but that means some messy code to have non-fixed data. Is there a better way to do this?

4

Hi @piechart,

The easiest way to do this is using the quickchart-python library. It is available as a package via pip install quickchart.io

The library allows you to use QuickChartFunction like so:

from quickchart import QuickChart, QuickChartFunction

qc = QuickChart()
qc.config = {
    "type": "doughnut",
    "data": {
        "labels": ['A', 'B', 'C', 'D', 'E'],
        "datasets": [{
            "data": [10, 20, 15, 5, 50]
        }]
    },
    "options": {
        "plugins": {
            "datalabels": {
                "formatter": QuickChartFunction('(val) => val + "%"')
            }
        }
    }
}

print(qc.get_url())

If you’re not using the library, you’ll ultimately have to send the chart config as a string.

One workaround that I’ve seen some people use to keep things cleaner: you could set formatter to some placeholder value like __FORMATTER_FUNCTION__, serialize your dict to JSON, and then do a string replacement on "__FORMATTER_FUNCTION__".

Hope this helps!

1 Like
5

Thank you! Exactly what I was looking for :slight_smile:

6

Hi @ian

Is it possible to add (label) annotations to pie charts?
If yes, would you mind giving an example?

I was trying to follow the example you gave here, and apply it to this chart

My goal is to place the annotation directly below the chart, but I can’t even manage to get it to show up :frowning:

7

Hi @Darren,

The easiest way to do this is to upgrade to Chart.js v3. You can do this by setting version=3 in your request. This will use a newer version of chartjs-plugin-annotations that is capable of drawing on pie charts.

Here’s your modified example

Note that I’ve moved some options into plugins (for Chart.js v3) and also added some padding on the chart so there’s enough room for the annotation.

chart.js v3 pie chart with annotation and datalabels
chart.js v3 pie chart with annotation and datalabels1000×600 80.6 KB

1 Like
8

Brilliant, thank you :+1:

Sorry @ian, a follow up question - is there any reason why I wouldn’t want to just use v3 by default with all charts?

9

In general, yes, v3 is preferred. There are a couple extensions that don’t work in v3, but otherwise I’d highly recommend using it.

1 Like