How to display percentages on pie chart pieces?

I have a pie chart where I show the value if you hover over it, but I want to show it as a percentage. Here is my code

 protected function getData(): array
    {
        $data = [
            "draft" => 1,
            "in_use" => 3,
            "available" => 2,
            "under_repair" => 0
        ];
        return [
            'datasets' => [
                [
                    'label' => 'Assets',
                    'data' => array_values($data),
                    'backgroundColor' => [
                        '#C98249',
                        '#69B19C',
                        '#9FCAE1',
                        '#D67676',
                    ],
                    'borderColor' => [
                        '#A6693A',
                        '#467D6E',
                        '#6A90B8',
                        '#B05858',
                    ],
                    'borderWidth' => 0.5,
                ],
            ],
            'labels' => array_keys($data),
        ];
    }

 protected function getData(): array
    {
        $data = [
            "draft" => 1,
            "in_use" => 3,
            "available" => 2,
            "under_repair" => 0
        ];
        return [
            'datasets' => [
                [
                    'label' => 'Assets',
                    'data' => array_values($data),
                    'backgroundColor' => [
                        '#C98249',
                        '#69B19C',
                        '#9FCAE1',
                        '#D67676',
                    ],
                    'borderColor' => [
                        '#A6693A',
                        '#467D6E',
                        '#6A90B8',
                        '#B05858',
                    ],
                    'borderWidth' => 0.5,
                ],
            ],
            'labels' => array_keys($data),
        ];
    }

4 Replies

toeknee•11mo ago

You need to adjust your data to be a percentage value in that case. Standard php stuff tbh

Skjena•11mo ago

As such chart js configuration options are supported by filament should I format the value something like this

 options:{ 
        plugins:{         
          datalabels: {
            color: 'white',
            formatter: function(value, context) {                  
              return Math.round(value/context.chart.getDatasetMeta(0).total * 100) + "%" ;
            }
          }
        }
      }

 options:{ 
        plugins:{         
          datalabels: {
            color: 'white',
            formatter: function(value, context) {                  
              return Math.round(value/context.chart.getDatasetMeta(0).total * 100) + "%" ;
            }
          }
        }
      }

toeknee•11mo ago

Yes to a point, or just do it within the $data and label the field percentage of X

Skjena•11mo ago

I too tried this, however the configuration option's formatter or any callback functions weren't working.

Gaming

Programming

How to display percentages on pie chart pieces?