DEV Community

Cover image for Use Laravel charts in Laravel.
Ariel Mejia
Ariel Mejia

Posted on • Edited on

Use Laravel charts in Laravel.

#laravel #chartjs #laravelcharts

If you need to add some graphs to your views, maybe you have work with some js library to add cool graphics but even with a good library like ChartJS implementing this is not so easy.

Installation

First we need to add a package to your Laravel project so in terminal add:



composer require consoletvs/charts:6.*
Enter fullscreen mode Exit fullscreen mode

If you are working with Laravel 5.5 or higher thats all you need to install the package thanks by autodiscover feature.

If you work with Laravel lower than 5.5 you will need to register a service provider, add this line into the config/app.php file in the providers section:



ConsoleTVs\Charts\ChartsServiceProvider::class,
Enter fullscreen mode Exit fullscreen mode

And to publish the configuration in terminal with the command:



php artisan vendor:publish --tag=charts_config
Enter fullscreen mode Exit fullscreen mode

Now you have the package installation done!

Use the package

We are going to use artisan cli to create a chart class.



php artisan make:chart UserChart
Enter fullscreen mode Exit fullscreen mode

Now in app directory we can see a folder named charts and there is our new class UserChart.php.

I will explain with an easy example but you can add as many complexity as you want, we are going to create a controller of type resource to display user chart:



php artisan make:controller UserChartController -r
Enter fullscreen mode Exit fullscreen mode

Now you can edit the file in app/Http/Controllers/UserChartController.php and only hold the index method all other rest full methods can be deleted, and you will have something like this:



<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

}
Enter fullscreen mode Exit fullscreen mode

To make it more easy I will create a fake data but you can use eloquent o queryBuilder to create queries as you need, I will import the new chart class created before to the controller, and start to create a chart with Laravel chart api fluid syntax:



<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $usersChart = new UserChart;
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'line', [10, 25, 13]);
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}
Enter fullscreen mode Exit fullscreen mode

Now we need a view to show the data in the last code snippet the index method returns a view for users charts, so I will create a file in resources/views/ named users.blade.php, with next content: 



@extends('layouts.app')

@section('content')
<h1>Sales Graphs</h1>

<div style="width: 50%">
    {!! $salesChart->container() !!}
</div>
@endsection
Enter fullscreen mode Exit fullscreen mode

Now we pass the chart script to the view file we only need to add the chart css and js library files, to keep it simple we are going to use the layout app blade file, it is located in resources/views/layout/app.blade.php, here we are going to add in header section the next line at the very bottom:



<head>
    <meta charset="utf-8">
    ...
    {{-- ChartScript --}}
    @if($usersChart)
    {!! $usersChart->script() !!}
    @endif
</head>
Enter fullscreen mode Exit fullscreen mode

To add JS library file we are going to the bottom to the file app.blade.php, before the html close tag and add the scripts:



@extends('layouts.app')

@section('content')
<h1>Users Graphs</h1>

<div style="width: 50%">
    {!! $usersChart->container() !!}
</div>
@endsection
Enter fullscreen mode Exit fullscreen mode

Finally we only need a route to access to the graphic view, in routes/web.php file you can add a route with get method to access to the usersChartController class in method index() in the example I set a route to 'sales':



<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

....

Route::get('users', 'UserChartController@index');
Enter fullscreen mode Exit fullscreen mode

Alt Text

Well it is simple but, maybe you want to customize it a little bit more, you can customize the charts by two ways, you can customize the "dataset" and the chart as itself, to start we are going to customize the "dataset":



<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $usersChart = new UserChart;
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'line', [10, 25, 13])
            ->color("rgb(255, 99, 132)")
            ->backgroundcolor("rgb(255, 99, 132)");
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}
Enter fullscreen mode Exit fullscreen mode

  • The method "color" set the border color in the case of a "line" or "area" charts it sets the line color, and as param requires a string with the rgb or rgba color

  • The method "backgroundcolor" set the area color, the color to fill, and as param requires a string with the rgb or rgba color

Alt Text

  • "fill" method requires a boolean and it paint the area or not if it is set as false, by default a chart is filled.

Alt Text

  • "linetension" method make less curved a line and it requires a float from 0.0 to 1.0

Alt Text

  • "dashed" method makes the line a dashed line and it requires an array.

Alt Text

Customize the chart

  • To customize the chart we can use some methods:
    • "minimalist" method requires a boolean and it removes the grid background and the legend of the chart
    • "displaylegend" methods requires a boolean and it is true by default, to hide the legend set false as param.
    • "displayaxes" method requieres a boolean and by default is true it, paint the background grid of the chart, to hide it just set false as the param.
    • "barWidth" this method does not do anything in line and area charts, it requires a double.


<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $usersChart = new UserChart;
        $usersChart->title('Users by Months', 30, "rgb(255, 99, 132)", true, 'Helvetica Neue');
        $usersChart->barwidth(0.0);
        $usersChart->displaylegend(false);
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'line', [10, 25, 13])
            ->color("rgb(255, 99, 132)")
            ->backgroundcolor("rgb(255, 99, 132)")
            ->fill(false)
            ->linetension(0.1)
            ->dashed([5]);
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Doughnutexample: 



<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $borderColors = [
            "rgba(255, 99, 132, 1.0)",
            "rgba(22,160,133, 1.0)",
            "rgba(255, 205, 86, 1.0)",
            "rgba(51,105,232, 1.0)",
            "rgba(244,67,54, 1.0)",
            "rgba(34,198,246, 1.0)",
            "rgba(153, 102, 255, 1.0)",
            "rgba(255, 159, 64, 1.0)",
            "rgba(233,30,99, 1.0)",
            "rgba(205,220,57, 1.0)"
        ];
        $fillColors = [
            "rgba(255, 99, 132, 0.2)",
            "rgba(22,160,133, 0.2)",
            "rgba(255, 205, 86, 0.2)",
            "rgba(51,105,232, 0.2)",
            "rgba(244,67,54, 0.2)",
            "rgba(34,198,246, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)",
            "rgba(233,30,99, 0.2)",
            "rgba(205,220,57, 0.2)"

        ];
        $usersChart = new UserChart;
        $usersChart->minimalist(true);
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'doughnut', [10, 25, 13])
            ->color($borderColors)
            ->backgroundcolor($fillColors);
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Bar example

With a little effort and the default bootstrap from Laravel installation:

UserChartController to generate the chart 



<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $borderColors = [
            "rgba(255, 99, 132, 1.0)",
            "rgba(22,160,133, 1.0)",
            "rgba(255, 205, 86, 1.0)",
            "rgba(51,105,232, 1.0)",
            "rgba(244,67,54, 1.0)",
            "rgba(34,198,246, 1.0)",
            "rgba(153, 102, 255, 1.0)",
            "rgba(255, 159, 64, 1.0)",
            "rgba(233,30,99, 1.0)",
            "rgba(205,220,57, 1.0)"
        ];
        $fillColors = [
            "rgba(255, 99, 132, 0.2)",
            "rgba(22,160,133, 0.2)",
            "rgba(255, 205, 86, 0.2)",
            "rgba(51,105,232, 0.2)",
            "rgba(244,67,54, 0.2)",
            "rgba(34,198,246, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)",
            "rgba(233,30,99, 0.2)",
            "rgba(205,220,57, 0.2)"

        ];
        $usersChart = new UserChart;
        $usersChart->minimalist(true);
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'bar', [10, 25, 13])
            ->color($borderColors)
            ->backgroundcolor($fillColors);
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}
Enter fullscreen mode Exit fullscreen mode

blade view with some bootstrap for styling 



@extends('layouts.app')

@section('content')


<div class="container">
    <h1>Users Graphs</h1>
    <div class="row">
        <div class="col-6">
            <div class="card rounded">
                <div class="card-body py-3 px-3">
                    {!! $usersChart->container() !!}
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
Enter fullscreen mode Exit fullscreen mode

Alt Text

Here is the code on Github repo:

https://github.com/ArielMejiaDev/SNIPPET_Laravel-charts

Latest comments (66)

Collapse
 
sammymwangangi profile image
Sammy Mwangangi •

dev-to-uploads.s3.amazonaws.com/up...

Collapse
 
sammymwangangi profile image
Sammy Mwangangi •

Is there a way to use icon as Label inside setLabel()? For example:

Collapse
 
arielmejiadev profile image
Ariel Mejia •

As I see the apexchartsjs library that is the one that built the charts behind the scene, does not provide a way to do it, but you can use some css to add styles to an image tag to make it absolute inside a div tag wrapper relative and place the icon where you want.

Collapse
 
rohaizi123 profile image
rohaizimohamed •

Hi Sir,
how i can make something like this

options = {
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%"
},
dropShadow: {
...
}
}
}
using larapex package

and how to show labels on donut chart?

Collapse
 
arielmejiadev profile image
Ariel Mejia •

Hi, you are working on a pie chart? what you need? to add a "%" symbol to the labels?

Collapse
 
rohaizi123 profile image
rohaizimohamed •

yes sir, I want to add % to the label, and also want the label appear on chart

Thread Thread
 
arielmejiadev profile image
Ariel Mejia •

I will add an example on docs as soon as I can, thanks for using the package

Thread Thread
 
rohaizi123 profile image
rohaizimohamed •

thank you sir, I really appreciate it

Collapse
 
beenitanep profile image
Beenitanep •

Hello,
I follow all your steps as per your instruction but i gives me error: Undefined variable: usersChart
when i do dd(usersChart ) it does not give any output.
steps:

  1. Add package: composer require consoletvs/charts
  2. php artisan vendor:publish --tag=charts_config
  3. php artisan make:chart UserChart
  4. make controller add code in controller: public function index() { $usersChart = new UserChart; $usersChart->labels(['Jan', 'Feb', 'Mar']); $usersChart->dataset('Users by trimester', 'line', [10, 25, 13]); return view('users', [ 'usersChart' => $usersChart ] ); }
  5. In my blade added: {!! $usersChart->container() !!}
Collapse
 
arielmejiadev profile image
Ariel Mejia •

Hi Beenitanep, please execute this in your controller:

dd($usersChart);

You should see the chart class object, if this is not the case I maintain another package for charts...

I hear too many reasons why this package is not working as ideally expected in this post comments, so a few months ago I created a library inspired in this package, here the post:

dev.to/arielmejiadev/create-charts...

I maintain this other package, I add a more clear documentation and if you have some trouble with this normally I can bring support quickly.

Expect this is helpful in someway.

Collapse
 
ibnucetf profile image
Ibnu mas ud •

Hello. i dunno why my view return white pages. really frustating. i follow every step but ended with white pages. can help?

Collapse
 
barfrakud profile image
barfrakud •

Hello. There is new version of Laravel Charts 7 with Chartisan. Any tutorial will be appreciated.

Collapse
 
arielmejiadev profile image
Ariel Mejia •

Maybe by the moment I recommend you my own chart package, created by many comments requiring some features: packagist.org/packages/arielmejiad...

Collapse
 
sammymwangangi profile image
Sammy Mwangangi • • Edited

Your package is awesome. I like the way it has easy-to-use features. I have an obstacle though. I am getting "ErrorException Undefined variable: chart". It's coming up when I register $chart->script() on my blade file. What could be the problem?

Thread Thread
 
arielmejiadev profile image
Ariel Mejia •

Thanks for using Larapex charts, please before return a view, make a dd($chart), just to see if the variable is getting the LarapexChart class, if this is not the case maybe you could paste your controller and view code here I would be glad to make a little review

Thread Thread
 
sammymwangangi profile image
Sammy Mwangangi •

This is my controller

use Illuminate\Http\Request;
use ArielMejiaDev\LarapexCharts\LarapexChart;

class HomeController extends Controller
{

public function index()
{

    $chart = (new LarapexChart)
        ->setType('line')
        ->setTitle('Earnings')
        ->setDataset([0, 10000, 5000, 15000, 10000, 20000, 15000, 25000, 20000, 30000, 25000, 40000])
        ->setLabels(["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]);

    $chart2 = (new LarapexChart)
        ->setTitle('My dataset')
        ->setType('area')
        ->setDataset([55, 30, 15])
        ->setColors(['#4e73df', '#1cc88a', '#36b9cc'])
        ->setLabels(["Direct", "Referral", "Social"]);

    return view('home', compact('chart', 'chart2'));
}
Thread Thread
 
sammymwangangi profile image
Sammy Mwangangi •

This is view code 

            <div class="lg:flex mb-4">
                <div class="transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100 hover:shadow-2xl shadow-xl bg-white rounded-lg mx-auto p-6 lg:w-3/5 mb-2">
                    {!! $chart->container() !!}

                    {!! $chart->script() !!}
                </div>
                <div class="transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100 hover:shadow-2xl shadow-xl bg-white rounded-lg mx-auto p-6 lg:ml-4 lg:w-2/5">
                    {!! $chart2->container() !!}

                    {!! $chart2->script() !!}
                </div>
            </div>
Thread Thread
 
sammymwangangi profile image
Sammy Mwangangi •

I succefully eradicated the error by placing the $chart->script() inside the view div element but now the charts are not visible.

Thread Thread
 
sammymwangangi profile image
Sammy Mwangangi •

This is what i get when i dd($chart)

ArielMejiaDev\LarapexCharts\LarapexChart {#312 ▼
+id: "ywklbqzivadhtegmrnouxfsjc"
#title: "Earnings"
#subtitle: null
#subtitlePosition: null
#type: "line"
#labels: ""Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec""
#dataset: "[0,10000,5000,15000,10000,20000,15000,25000,20000,30000,25000,40000]"
#height: 350
#colors: "["#008FFB","#00E396","#feb019","#ff455f","#775dd0","#80effe","#0077B5","#ff6384","#c9cbcf","#0057ff","00a9f4","#2ccdc9","#5e72e4"]"
#horizontal: "{"horizontal":false}"
#xAxis: "[]"
#grid: "{"show":false}"
#stroke: null
-chartLetters: "abcdefghijklmnopqrstuvwxyz"
}

Thread Thread
 
sammymwangangi profile image
Sammy Mwangangi •

The charts cannot now show on browser. I get this error on console log:

Uncaught ReferenceError: ApexCharts is not defined

Thread Thread
 
arielmejiadev profile image
Ariel Mejia •

Do you add the CDN of apexcharts in your blade layout file? if you dont want to go to the apexchart site to get the cdn you can use the helper

<script src="{!! $chart->cdn() !!}"></script>

Remember to print in the script tags you need the bang bang syntax not the blade mustaches.

Thread Thread
 
arielmejiadev profile image
Ariel Mejia •

Do you host the code in github, to get more context, please just review if you are importing the package class, you need to add the namespace of the package class:

use ArielMejiaDev\LarapexCharts;

This is something that the editor can do automatically by you, since I got only the code from the controller method I cannot verify if you has this class imported

Thread Thread
 
sammymwangangi profile image
Sammy Mwangangi •

This is the github code:

github.com/sammymwangangi/TALL-Das...

Thread Thread
 
arielmejiadev profile image
Ariel Mejia •

Hi Sammy, excuse me for the wait, today I make some time to review the code, I create an example using the data that you want, everything is working fine just remeber in docs I add an alert on line, area charts because in this charts you can represent more than one series of data you need to set the data like this:

$chart->setDataset([
    [
        "name" => "Earnings",
        "data" => [100, 200, 300]
    ]
])

As you can see its a multidimensional array an every subset is an associative array, then you can see that the "data" key has an array as its value, I add a live example here: github.com/ArielMejiaDev/Larapex-C...

you can check the code, thanks for using Larapex Charts, I saw your dashboard project so I add the example using Tailwindcss to you can get a pretty good idea how it looks on your project, please let me know about your project it seems very interesting, there is something more that I could help you I will be here.

Thread Thread
 
sammymwangangi profile image
Sammy Mwangangi • • Edited

Thank you for your feedback. I appreciate your effort to help me. I was trying to use your package for charts on my project instead of using chartsJs. I will follow your advice and also check your example there to rectify the problem.
Thanks also for the interest in my project. It's an open-source TALL Stack dashboard. I am trying to make sure all the technologies have been represented well on the dashboard. Tailwind for UI design, Alpine Js, and Livewire for UX and of course Laravel for backend stuff. I have implemented the new Laravel component features also. It's still a WIP though. I'll need to clean the code once I am done with everything.
You're welcome to fork or do a pull request. Or give me a star.

Thread Thread
 
sammymwangangi profile image
Sammy Mwangangi •

I have noticed something with the "undefined variable $chart" error. It was caused when I moved the main layout file to the components folder. That is when I started to implement the Laravel's components feature.
I have created a similar file and placed it on the layouts folder and changed my view file to use the initial methods; @extends and @yield().

Thread Thread
 
arielmejiadev profile image
Ariel Mejia •

Hi, you are using the new Laravel components? in this case if you are using variables you need to add a class to add the component logic, look at "app/Views" folder, you can create a view composition class with the artisan command: "php artisan make:component yourcomponent", then it will add a file with a render function that calls directly the view then in the constructor add the $chart variable that you need maybe something like:

php artisan make:component EarningsChart

go to app/Views/chart.php

<?php
namespace App\View\Components;

use Illuminate\View\Component;
use ArielMejiaDev\LarapexCharts\LarapexChart;

class Alert extends Component
{

    /**
     * Chart instance.
     *
     */
    public $chart;

    /**
     * Create the component instance.
     *
     * @param $chart
     * @return void
     */
    public function __construct(LarapexChart $chart)
    {
        $this->chart = (new LarapexChart)
        ->setType('line')
        ->setTitle('Earnings')
        ->setXAxis([
            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'
        ])
        ->setDataset([
            [
                'name'  =>  'Earnings',
                'data'  =>  [0, 10000, 15000, 10000, 20000, 15000, 25000, 20000, 30000, 25000, 40000]
            ]
        ])
    ;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

Please let me know if this approach works, and congrats your Tall dashboard looks amazing, I am doing a secret open source project with similar aproach but I prefer VueJS

Thread Thread
 
sammymwangangi profile image
Sammy Mwangangi •

Thanks for your feedback. I will try out this approach and I'll let you know if it works. Also, I can't wait to see your project.

Thread Thread
 
arielmejiadev profile image
Ariel Mejia •

Thanks!

Thread Thread
 
alexander0312 profile image
alexander lim •

hi,, i'm using larapexchart in laravel but i keep on getting a error .. saying that Call to a member function container() on array.. can you help me please...

Thread Thread
 
arielmejiadev profile image
Ariel Mejia •

Hi there! thanks for using Larapex charts, here is a live sample with TailwindCSS: larapex-chart-example.herokuapp.com/

Here the controller where I built the charts: github.com/ArielMejiaDev/Larapex-C...

Here the view: github.com/ArielMejiaDev/Larapex-C...

If you want to share the code I can give a look at the code, alternatively you can make a "dd()" to the chart variable before pass it to the view and check that its a LarapexChart object instance.

Collapse
 
ritzchy04 profile image
ritzchy04 •

you used $salesChart instead of $usersChart in users.blade.php

Collapse
 
arielmejiadev profile image
Ariel Mejia •

Well you got the idea ;)

Collapse
 
jackemond profile image
JackEmond • • Edited

HI,

I just started using Laravel Charts in a personal project and I absolutely love it! The one thing is I cant seem to figure out how to set a title for the x axis and y axis. Is there a way to do this?

Also is there a way to hide part of the dataset? E.g all of my numbers are between 80-100 is there a way to hide 0-70 so it only shows the section with points on the graph?

Thanks!

Collapse
 
arielmejiadev profile image
Ariel Mejia •

Hi thanks! ummm x and y axis has a label property, this is the only value you can pass as array of strings, then to hide not used values, I really never hear about this I suppose this is not a feature, I had a great experience working with Laravel Charts package, there are some suggestions in comments so I decide to make my own implementation for apexcharts library another very cool javascript charts library, that has more flexibility in terms of work with css I will share you a link to the package maybe it would be interesting for you: madewithlaravel.com/larapex-charts

Collapse
 
dejvit profile image
Dávid Pavličko • • Edited

Hello, I am facing three problems I would like to discuss, mazybe someone could help me.

1.) Firstly, the easier one -> how can I hide a dots in line chart? I would like to have two datasets in one line chart which I already have but one dataset would be only simple line (imagine sth like level of recommended value) and the other dataset would be as it is and can go above or under this simple dataset line.

2.) Is it possible to make dots in line chart or sections in doughnut chart clickable? I mean make a redirect on specific dot of line chart for example.

3.) I have one page with full of ajax, table data are dynamic and contains "show" modal button which is also made by ajax .. I always have the loading animation in ajax modal for every kind of chart... Any advice? Thanks :)

In general this tutorial is very helpful and for basic usage It works like a charm.

Collapse
 
arielmejiadev profile image
Ariel Mejia •

Hi David, I will recommend you:

  1. Laravel charts works with many chart libraries some of them very old and the most cool and used is chart js, in chart js exists a property call minimalist(), I am pretty sure that this will work with this package as a fluent method like: 
$chart->setMinimalist()->setLabels()...

  1. I will recommend you another cool charts library it is apexcharts is really similar but its better in terms of variety of charts, customization and respond better to css rules.
    in this post many devs comment about customizations for the tutorial package so I created a similar package for apexchart if you prefer you can see the js original package here: apexcharts.com/ and the package that I wrote to work similar as Laravel charts is:
    Larapex charts: madewithlaravel.com/larapex-charts is another wrapper for this other library, it has more customizations.

  2. About the modal, well is pretty much the same, apexcharts does not load with any loader as "preloader" so it would be more convinient to customize it... I would recommend you, if you work directly you can use the wrapper madewithlaravel.com/larapex-charts and then just call directly a controller that serve a Chart class like a service with this implementation then do not use the blade helpers because you want it dinamically so just fetch all json object and you are able to render it anywhere.

I know this text is a little dense but, there are no simple way to respond, there are many requests about Laravel charts features, but to keep it simple I just find another cool js library more flexible and create a wrapper taking all good stuffs that I like of these package, and try to make it as flexible as posible.

Collapse
 
dejvit profile image
Dávid Pavličko •

Thank you I am gonna take a look at this.

Collapse
 
philipiree profile image
philipiree •

chart:26 Uncaught TypeError: Cannot read property 'getContext' of null. I have followed all the steps but the error shows this in console var
ctvChart = document.getElementById('hamlwzcyqxfksvupbergjdnto').getContext('2d');

Collapse
 
arielmejiadev profile image
Ariel Mejia •

Many developers talk me about Laravel charts package inconsistence so I decide to write my own package to provide a similar solution with easy api, you can read about it here: dev.to/arielmejiadev/create-charts...

Collapse
 
arielmejiadev profile image
Ariel Mejia •

There is a chance to view the code to get more context?

Collapse
 
philipiree profile image
philipiree •

Hi, thank you so much for your reply! The problem was the CDN. I have put this instead and it worked!

Thread Thread
 
arielmejiadev profile image
Ariel Mejia •

Great! is difficult to get this bugs because there are not code bugs, cool

View full discussion (66 comments)