How to put text in middle of donut

[jamiewhitham]

Hello

I would like to put some text in the middle of a donut chart. I tried looking at options->plotOptions->pie->donut->labels but couldn't get anything displayed despite no error.

Anyone have another way of doing this?

[paulius2k]

Put on the first indent level:

type: custom:apexcharts-card
chart_type: donut
apex_config:
  plotOptions:
    pie:
      donut:
        labels:
          show: true,
          total:
            showAlways: true,
            show: true

you will get this:

[mdoliver]

Hi @paulius2k
Would you happen to know how to use the formatter function to prevent the extraneous decimals from displaying in the centre total (see screen shot)? I have the below code for the data labels inside the donut but not sure what to use for the centre total. Thanks!

formatter: EVAL:function(val) {return (val).toFixed(1) + " %"}

[paulius2k]

Hi @mdoliver
I find this info from various sources:

1. https://apexcharts.com/docs/options/plotoptions/pie/#labels

formatter: function
A custom formatter function to apply on the total value. It accepts one parameter w which contains the chart’s config and global objects.
Defaults to a total of all series percentage divided by the length of series.

and

2. Total formatting apexcharts/apexcharts.js#1262 (comment)

so just re-using it:

type: custom:apexcharts-card
chart_type: donut
apex_config:
  plotOptions:
    pie:
      donut:
        labels:
          show: true,
          total:
            showAlways: true,
            show: true
            formatter: |
              EVAL:function(w) {
                return w.globals.seriesTotals.reduce((a, b) => {return a + b}, 0).toLocaleString();
              }

seems to work for me.

Without formatter::

with the above formatter::

I hope this works for you as well.

[mdoliver]

Thanks so much for your help! That's worked well for me.