Bar Chart Widget labels not working (showing undefined)

I tried this values in return value for getData it shows undefined:

protected function getData(): array
    {
        return [
            'datasets' => [
                [
                    'data' => ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
                    'backgroundColor' => $this->getColors(),
                    'borderColor' => $this->getColors()
                ],
            ],
            'labels' => ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten'],
        ];
    }
protected function getType(): string
    {
        return 'bar';
    }

    protected function getColors(): array
    {
        return [
            '#0A2B47', '#0E436C', '#0A5182', '#075F9D', '#0776C2', '#1496E3',
            '#3BAFF3', '#80CAF9', '#BCE1FB', '#F0F8FF'
        ];
    }

protected function getData(): array
    {
        return [
            'datasets' => [
                [
                    'data' => ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
                    'backgroundColor' => $this->getColors(),
                    'borderColor' => $this->getColors()
                ],
            ],
            'labels' => ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten'],
        ];
    }
protected function getType(): string
    {
        return 'bar';
    }

    protected function getColors(): array
    {
        return [
            '#0A2B47', '#0E436C', '#0A5182', '#075F9D', '#0776C2', '#1496E3',
            '#3BAFF3', '#80CAF9', '#BCE1FB', '#F0F8FF'
        ];
    }

3 Replies

Vp•2mo ago

You need to have label inside datasets https://filamentphp.com/docs/3.x/widgets/charts#overview, from where did you copy this?

Jap•2mo ago

I just created the example myself, it seems label inside datasets only accepts string. It works fine btw when I change the type to 'pie'.

Vp•2mo ago

It uses Chart.js under the hood, so you can check all options (customizations etc) through chart js docs https://www.chartjs.org/docs/latest/charts/doughnut.html

Gaming

Programming

Bar Chart Widget labels not working (showing undefined)