diff --git a/packages/widgets/docs/03-charts.md b/packages/widgets/docs/03-charts.md index 1aac121628..84179c46d5 100644 --- a/packages/widgets/docs/03-charts.md +++ b/packages/widgets/docs/03-charts.md @@ -12,9 +12,9 @@ Start by creating a widget with the command: php artisan make:filament-widget BlogPostsChart --chart ``` -There are several chart classes available, but we'll use the `LineChartWidget` class for this example. +There is a single `ChartWidget` class that is extended for all charts. The type of chart is set by the `getType()` method. In this example, that method returns the string `'line'`. -The `getHeading()` method is used to return a heading that describes the chart. +The `protected static ?string $heading` variable is used to set the heading that describes the chart. If you need to set the heading dynamically, you can override the `getHeading()` method. The `getData()` method is used to return an array of datasets and labels. Each dataset is a labeled array of points to plot on the chart, and each label is a string. This structure is identical to the [Chart.js](https://www.chartjs.org/docs) library, which Filament uses to render charts. You may use the [Chart.js documentation](https://www.chartjs.org/docs) to fully understand the possibilities to return from `getData()`, based on the chart type. @@ -23,14 +23,11 @@ The `getData()` method is used to return an array of datasets and labels. Each d namespace App\Filament\Widgets; -use Filament\Widgets\LineChartWidget; +use Filament\Widgets\ChartWidget; -class BlogPostsChart extends LineChartWidget +class BlogPostsChart extends ChartWidget { - public function getHeading(): string - { - return 'Blog posts'; - } + protected static ?string $heading = 'Blog Posts'; protected function getData(): array { @@ -44,6 +41,11 @@ class BlogPostsChart extends LineChartWidget 'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], ]; } + + protected function getType(): string + { + return 'line'; + } } ```