Metric Donut Chart

# Make

The DonutChartMetric metric is designed for creating Donut charts.

You can create DonutChartMetric using the static make() method.

make(Closure|string $label)

Method values() allows you to specify the relevance for a metric.

values(array|Closure $values)
use MoonShine\Metrics\DonutChartMetric;
 
//...
 
public function components(): array
{
return [
DonutChartMetric::make('Subscribers')
->values(['CutCode' => 10000, 'Apple' => 9999])
];
}
 
//...

# Colors

The colors() method allows you to specify colors for the metric.

colors(array|Closure $values)
use MoonShine\Metrics\DonutChartMetric;
 
//...
 
public function components(): array
{
return [
DonutChartMetric::make('Subscribers')
->values(['CutCode' => 10000, 'Apple' => 9999])
->colors(['#ffcc00', '#00bb00'])
];
}
 
//...

# Decimal places

The decimals() method allows you to specify the maximum number of decimal places for the total value.

By default, up to three decimal places are displayed.

use MoonShine\Metrics\DonutChartMetric;
 
//...
 
public function components(): array
{
return [
DonutChartMetric::make('Subscribers')
->values(['CutCode' => 10000.12, 'Apple' => 9999.32])
->decimals(0)
];
}
 
//...

# Block width

Method columnSpan() allows you to set the block width in the Grid grid.

columnSpan(
int $columnSpan,
int $adaptiveColumnSpan = 12
)

$columnSpan - relevant for desktop,
$adaptiveColumnSpan - relevant for mobile version.

use App\Models\Article;
use MoonShine\Decorations\Grid;
use MoonShine\Metrics\DonutChartMetric;
 
//...
 
public function components(): array
{
return [
Grid::make([
DonutChartMetric::make('Subscribers')
->values(['CutCode' => 10000, 'Apple' => 9999])
->columnSpan(6),
DonutChartMetric::make('Tasks')
->values(['New' => 234, 'Done' => 421])
->columnSpan(6)
])
];
}
 
//...

See the Decoration Layout section for more details.