laravel-chartjs not displaying anything

Question

I am using the package found here to use chartjs on my laravel project, I followed the instructions to install it and tried to load the example into a blade file. The issue is, nothing is displaying. Below I attached the example code, does anyone have experience using this package and could point me in the right direction?

The way I installed it, in this order was:

composer require fx3costa/laravelchartjs
added Fx3costa\LaravelChartJs\Providers\ChartjsServiceProvider::class to Providers
npm install chart.js --save

The example method.

private function createchart(){
        $chartjs = app()->chartjs
        ->name('lineChartTest')
        ->type('line')
        ->size(['width' => 400, 'height' => 200])
        ->labels(['January', 'February', 'March', 'April', 'May', 'June', 'July'])
        ->datasets([
            [
                "label" => "My First dataset",
                'backgroundColor' => "rgba(38, 185, 154, 0.31)",
                'borderColor' => "rgba(38, 185, 154, 0.7)",
                "pointBorderColor" => "rgba(38, 185, 154, 0.7)",
                "pointBackgroundColor" => "rgba(38, 185, 154, 0.7)",
                "pointHoverBackgroundColor" => "#fff",
                "pointHoverBorderColor" => "rgba(220,220,220,1)",
                'data' => [65, 59, 80, 81, 56, 55, 40],
            ],
            [
                "label" => "My Second dataset",
                'backgroundColor' => "rgba(38, 185, 154, 0.31)",
                'borderColor' => "rgba(38, 185, 154, 0.7)",
                "pointBorderColor" => "rgba(38, 185, 154, 0.7)",
                "pointBackgroundColor" => "rgba(38, 185, 154, 0.7)",
                "pointHoverBackgroundColor" => "#fff",
                "pointHoverBorderColor" => "rgba(220,220,220,1)",
                'data' => [12, 33, 44, 44, 55, 23, 40],
            ]
        ])
        ->options([]);


        return $chartjs;

blade file:

<div style="width:75%;">
    {!! $chartjs->render() !!}
</div>

no, it only install chart.js you also need to integrate it with your blade, for example with script tag — RainDev
– RainDev, Commented Jul 12, 2018 at 14:25

RainDev · Accepted Answer · 2018-07-12 15:43:44Z

1

The problem is that command npm install chart.js --save only installs chartjs libray (in /node_modules dir), you also need to integrate it with your project, for example with script tag placed in <head>:

<script src="path/to/chartjs/dist/Chart.js"></script>

answered Jul 12, 2018 at 15:43

RainDev

1,1288 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

laravel-chartjs not displaying anything

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related