How to use plugins in chartjs and laravel chart consoletvs/chartsjs - laravel

Question

Need use chartjs plugin datalabels in laravel 5.8 and consoletvs/chartsjs ver 6.*
This line generate a error in laravel.
$chart->plugins(['datalabels'=>['color'=>'#223388']]);
$chart = new Chart;
$chart->labels($arrHora);
$chart->dataset('Propostas Por Hora','bar', $arrQtdHora)
->backgroundColor('#64b5f6');
$chart->options([
'responsive' => true,
//'aspectRatio' => 1,
'tooltips' => ['enabled'=>false],
'legend' => ['display' => false],
'scales' => [
'yAxes'=> [[
'display'=>false,
'ticks'=> ['beginAtZero'=> true],
'gridLines'=> ['display'=> false],
]],
'xAxes'=> [[
'categoryPercentage'=> 0.55,
//'barThickness' => 100,
'barPercentage' => 0.5,
'ticks' => ['beginAtZero' => true],
'gridLines' => ['display' => false],
]],
],
]);
$chart->plugins(['datalabels'=>['color'=>'#223388']]);
//dd($chart);
//->backgroundColor('#64b5f6');
return view('dashboard', ['chart' => $chart]);

Answer 1

Two things I have to clarify, after playing around with the library, I came up with the following results:
First: The function $chart->plugins is used to create inline plugins only, under chartjs/script.blade.php the file begins with:
So for each plugin array that you define it will load a view from the pluginsView array that have the same name, but I think this is not full developed yet, and since this is not what the question is about lets move on.
Second: You can perfectly a nested option use options -> plugin like I have suggested before, but there's one thing that you will have to be careful whit, is that 'plugins' can't be an array like the others, and here is why:
The function expects a string to be printed raw, so with that you can use something like:
$chart->options([
//...
'plugins' => '{datalabels: {color: \'red\'}}',
//...
]);
Which will work as expected:

Answer 2

I share here the complete solution of my code and if you have any comments or suggestions, you will be welcome.
/* Controller */
<?php
namespace App\Http\Controllers\dashboard;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;
use ConsoleTVs\Charts\Classes\Chartjs\Chart;
use DB;
class DashBoardController extends Controller
{
public function index() {
$result = DB::select('select
convert(varchar(10),data_da_solicitacao,121) data,
convert(varchar(2),data_da_solicitacao,114) hora,
COUNT(id_controle_proposta_pac) qtdHora
from contact_std_parceiros_propostas (nolock) p
where convert(varchar(10),data_da_solicitacao,121) between convert(varchar(10),getdate(),121) and convert(varchar(10),getdate(),121)
and not exists (select * from contact_std_parceiros_propostas_fora (nolock) f where f.id_controle_proposta_pac = p.id_controle_proposta_pac)
Group by convert(varchar(10),data_da_solicitacao,121), convert(varchar(2),data_da_solicitacao,114)
Order by 1');
$arrHora = array();
$arrQtdHora = array();
$i = 0;
foreach ( $result as $r )
{
$arrHora[$i] = $r->hora;
$arrQtdHora[$i] = $r->qtdHora;
$i++;
}
$chart = new Chart;
$chart->labels($arrHora);
$chart->dataset('Propostas Por Hora no dia de hoje','bar', $arrQtdHora)->backgroundColor('#64b5f6');
$chart->options([
'responsive' => true,
'legend' => ['display' => true],
'tooltips' => ['enabled'=>true],
//'aspectRatio' => 1,
'scales' => [
'yAxes'=> [[
'display'=>false,
'ticks'=> ['beginAtZero'=> true],
'gridLines'=> ['display'=> false],
]],
'xAxes'=> [[
'categoryPercentage'=> 0.8,
//'barThickness' => 100,
'barPercentage' => 1,
'ticks' => ['beginAtZero' => true],
'gridLines' => ['display' => false],
]],
],
'plugins' => '{datalabels: {color: \'red\'}}',
]);
return view('dashboard',compact('chart'));
}
}
/* view */
#extends('layout.main')
#section('titulo','Pac - DashBoard')
#section('conteudo')
<div class="row">
<div class="col s6 col m12 l12">
<div class="x_panel">
<div class="x_title">
<div class="col s6 m6 l6"><h2>Propostas do dia</h2></div>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content" style="display: block;">
<div class="row">
<div class="row top_tiles" id="card-0"></div>
<div class="row">
<div class="col s4 m7 l7">
<div id="graph-0" class="x_panel" style="height: 250px">
<!--<canvas id="bar-0" style="width: 70% !important;height: auto !important;">-->
{!! $chart->container() !!}
#foreach($chart->plugins as $plugins)
#include($chart->pluginsViews[$plugins])
#endforeach
<!--</canvas>-->
</div>
</div>
<div class="col s3 m5 l5">
<div id="graph-1" class="x_panel">
<canvas id="pie-1" style="width: 100% !important;height: auto !important;"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{!! $chart->script() !!}
#endsection