Filament•3mo ago

How to have a color per label in a doughnut Chart?

Hi, I have a widget doughnut that displays Payments according to their status. So far so good. Now I want each status to have a color on the chart, preferably matching the color of the status I setup in the PaymentStatus enum. How can I do that? So far I have this:

enum PaymentStatus: string implements HasColor
{
    case Paid = 'paid';
    case Due = 'due';
    case Overdue = 'overdue';
    case Reminded = 'reminded';

    public function getColor(): string|array|null
    {
        return match ($this) {
            self::Paid => 'success',
            self::Due => 'warning',
            self::Overdue => 'success',
            self::Reminded => Color::Orange,
        };
    }
}

enum PaymentStatus: string implements HasColor
{
    case Paid = 'paid';
    case Due = 'due';
    case Overdue = 'overdue';
    case Reminded = 'reminded';

    public function getColor(): string|array|null
    {
        return match ($this) {
            self::Paid => 'success',
            self::Due => 'warning',
            self::Overdue => 'success',
            self::Reminded => Color::Orange,
        };
    }
}

Chart:

'datasets' => [
  [
      'label' => 'Payments',
      'data' => $grouped->map(fn ($group) => $group->sum('amount'))->flatten()->toArray(),
      "backgroundColor" => [
          "rgba(" . PaymentStatus::Reminded->getColor()[500] . ")", // Not very nice way of getting a color
          "rgba(" . PaymentStatus::Paid->getColor() . ")", // As this one is set to 'success' I don't have access to the actual color. It returns 'success'
],

'datasets' => [
  [
      'label' => 'Payments',
      'data' => $grouped->map(fn ($group) => $group->sum('amount'))->flatten()->toArray(),
      "backgroundColor" => [
          "rgba(" . PaymentStatus::Reminded->getColor()[500] . ")", // Not very nice way of getting a color
          "rgba(" . PaymentStatus::Paid->getColor() . ")", // As this one is set to 'success' I don't have access to the actual color. It returns 'success'
],

thanks for any help possible

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

How to have a color per label in a doughnut Chart?