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.*
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,
And to publish the configuration in terminal with the command:
php artisan vendor:publish --tag=charts_config
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
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
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()
{
//
}
}
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 ] );
}
}
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
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>
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
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');
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 ] );
}
}
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
- "fill" method requires a boolean and it paint the area or not if it is set as false, by default a chart is filled.
- "linetension" method make less curved a line and it requires a float from 0.0 to 1.0
- "dashed" method makes the line a dashed line and it requires an array.
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 ] );
}
}
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 ] );
}
}
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 ] );
}
}
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
Here is the code on Github repo:
Top comments (66)
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:
Hi Beenitanep, please execute this in your controller:
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.
Hello. There is new version of Laravel Charts 7 with Chartisan. Any tutorial will be appreciated.
Maybe by the moment I recommend you my own chart package, created by many comments requiring some features: packagist.org/packages/arielmejiad...
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?
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
This is my controller
use Illuminate\Http\Request;
use ArielMejiaDev\LarapexCharts\LarapexChart;
class HomeController extends Controller
{
This is view code
I succefully eradicated the error by placing the $chart->script() inside the view div element but now the charts are not visible.
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"
}
The charts cannot now show on browser. I get this error on console log:
Uncaught ReferenceError: ApexCharts is not defined
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
Remember to print in the script tags you need the bang bang syntax not the blade mustaches.
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:
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
This is the github code:
github.com/sammymwangangi/TALL-Das...
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:
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.
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.
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().
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:
go to app/Views/chart.php
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
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.
Thanks!
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...
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.
Hi there,
I'm new to laravel/web-development/the whole lot. so my understanding is quite basic (maybe i have a lot of common knowledge).
for some reason My charts are not appearing. and i feel like the joke is on me - like there is some thing that i fail to see - that is quite obvious to the rest of the reader.
i've also downloaded the chart.js library to try and make the chart work.
"Failed to load resource: the server responded with a status of 404 (Not Found)" is the console message i get.
i followed the line chart example
help please :)
Ofcourse, you have a repo of the proyect? if you like I could make a repo with the example just to show some example or if you have one, maybe you can share the link and I will try, just a question, do you see a circle loader?
I will be waiting to help
Hi Ariel,
Yes, I see a circle loader. but for some reason I think there is a component/vaiable/library-link missing.
I do not have a repository of the project - it is simply a new project in wich i followed your post's instructions to see if i could make a chart using ChartJS.
so far i've seen people use a html tag and some JS code to render charts.
i came upon your post when i wanted to use laravel queries/route-model-binding to retun some data to the chart.
I't would be most helpful is you could send me an example so i can try and understand what is wrong.
thank you so much.
Ok I will send you a the original code maybe in an hour or more, but at this moment I think you should review in header of your template, you need to have :
If you already have it, remember to end your template with:
I will send you an example, thanks for follow the post.
so,
i've played around with the code and the chart is rendered.
now i'm trying to pass data from my project's controller via two query's
one for the labels and one for the data - those two results i have stored in two variables in the controller. i then attempted to insert those variables into the relevant field functions: labels, dataset..
but what i get is an empty table with "object Object" in the x axis and 0 - 1.0 in the y axis but no line is rendered.
i've tried to die-dump the variables. then i figured out i can parse them "toArray()" but still i got the same result.
any idea's what i should do ?
The code is already added in the post, ok Maybe because the "toArray()" function returns a wrapper that certanly is similar to array you can access to data like an array, but It is not a pure php array because you can use some methods with the result array, maybe try adding mock data "[10,40,20]" and pass it at "dataset()" method.
so...the mock data works just fine.
but i want to pass data from something like this:
$label = DB::table('users')->where('name', 'like', '%john%')->get('name');
and then pass the variable $label to the chart like so:
$usersChart->labels($label);
the same for the dataset:
$data = DB::table('users')->where('name', 'like', '%john%')->get('age');
$usersChart->dataset('all users named like john of age 44 and up', 'line', $data)
->color("rgb(255, 99, 132)")
->backgroundcolor("rgb(255, 99, 132)")
->fill(true)
->linetension(0.3);
but when i dye dump it says they are collections holding arrays. and the chart does not work :/
I recommend you to make first a dd() of $label, maybe it returns an array of Users model collection and you need to pass a simple array not a multidimensional one, so maybe you need something like:
you need to see something like:
I mean maybe you try this but just to be sure if these not work, you can create a array from a loop, it is not elegant way but only to be sure:
Later you can use a tap() method to make it more elegant
Hi ariel,
Sorry im new to this community and am trying to see how i can send code snippets like tou do.
Ive dye dumped the label and dataset collections (the come from querries) and i recieve a collection of php arrays. The problem is that they are key value paired so im guessing the blade does get an object and not an array of data.
Ive looked around for different methids and it seems there might be a get_data() function that takes the params and returns an array.
If it works ill let you know.
If you have some insights for me i'll be more than happy.
Other than that thank you so much !
Thanks I try to explain it as much as I can, you write markdown in dev.to, so to write code snippets you only need to add alt+96 it writes " ` " you need to write this aphostrophe three times to open a block and three times to close the block, inside the block just paste your code, I think that you can use other ways to get data as you want but is a eloquent stuff, if you wish you can paste the dd() output and maybe I could help.
Happy code!
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?
Hi, you are working on a pie chart? what you need? to add a "%" symbol to the labels?
yes sir, I want to add % to the label, and also want the label appear on chart
I will add an example on docs as soon as I can, thanks for using the package
thank you sir, I really appreciate it
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');
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...
There is a chance to view the code to get more context?
Hi, thank you so much for your reply! The problem was the CDN. I have put this instead and it worked!
Great! is difficult to get this bugs because there are not code bugs, cool
Hi, I have laravel 6.5 and there is no app.blade.php or layouts.app, can you please include what do you need from there since it is removed from latest versions? Using your code, without the layouts.app I see an ellipse (...) only and an error in the console:
Thank you.
Hi to add the auth scaffold with layouts and all blade files included and authentication feature, you need to add another composer package because the artisan command:
Is not available anymore, I published a post with different ways to get this scaffold again, is very easy, you can see the post here
Charts is wroking fine but when i jumped to other url, THis shows me error:
Undefined variable: chart (View: C:\wamp64\www\AdBlog\resources\views\admin\layouts\footer.blade.php)
I faced this issued when i jumped to other page.
you need to add your chart helper
in the blade file of the view, this error is because it is added to the master blade layout, and if you extends other views from this layout you need to pass the chart variable to any file to extend from this layout, but the correct way is to pass the helper ONLY to your dashboard view not in the layout so it only be required there, I hope it works, happy coding!
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.
Hi David, I will recommend you:
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.
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.
Thank you I am gonna take a look at this.
Thank you for the detailed article, the author's Laravel Chart website and github documentation and examples are lame, he should include a link to this article.
Also it is important to know that the author removed some useful functionality that worked out of the box, for example when working with eloquent models and filtering data by week, month, year etc, the previous v.5 had all of this , the new v.6 doesnt and that makes it more difficult to get the labels and data in these charts, the new version api is not elegant like the previous version, it looks more like a hardcoded version and more lines of code when trying to filter data instead of just using grouByMonth() like it was possible in version 5.
It is hard to see what go better in this new version compared to the previous one, even the charts in the previous one had more options and support for eloquent models, this new one looks more like any js charts library which you just put hardocoded values in it, not very dynamic.
At the moment it is the most complete package to implement an easy graphs by far, a very cool option is the APEX Graphs library, is a JS library the downside is that you need to implement by your own the api to consume the data in the view, another aproach could be good if the data is static and it will not change, to create a blade include to add the html tags for the graph, and create a slot to print the values from vainilla Javascript with blade syntax you can add values as:
This aproach is a good one and it is pretty similar to the aproach of laravel chart, definitely, I will work on an example to post here, and thanks for your comment!
Hi, loved your tutorial, as others have mentioned laravel chart's tutorial really need to be improved with more examples.
I hope you can help me out, Ariel, or maybe if you have the answer to update your post as well.
I'm able to read chart.js's tutorial (which is the library I'm using)
But, I'm not too sure on how I can access those parameters from laravel chart's object. I believe it's done through their so called APIs, but documentation is scant...
For example in chart.js i need to set this option.
I'm not sure how I can pass this in via the options API in laravel charts
options: {
scales: {
xAxes: [{
type: 'time',
ticks: {
autoSkip: true,
maxTicksLimit: 20
}
}]
}
}
Okay, I figured it out until this part
the options API accepts arrays in 'parameter=>setting'
->options(['maintainAspectRatio'=>false); this works to set maintainAspectRatio of chart js to false correctly
My problem comes with the 'scales' part of the nested xAxes parameter.
I'm not too sure how I can form it correctly so that I'm able to do xAxes something like this (when rendered in HTML)
options: {"maintainAspectRatio":false,"scales":{"xAxes":[{"display":false}],"yAxes":[{"ticks":{"beginAtZero":true},"display":true}]},"legend":{"display":true}},
I figured, if I can get the syntax, then I'll be able to do what I need with the other options
Hi, I think that It does not have all ChartJS methods available, I suppose it could be for compatible reasons, because the package has methods that are support by ChartJS and other libraries so you can search as I did to make this post, in Vendero/ConsoleTV/Charts/ChartJS I think but there is only a small part of all ChartJS methods available.
You could create your own class that extends from this and add the setters for the methods that you need and build the chart object with this values, this is maybe the most practical way in your case.
Hi Ariel, you pointed me to the right location, in the chart.php i was able to see how they formatted the default variable, and from there I was able to feed in what was needed, if this is of help to others.
return $this->options([
'maintainAspectRatio' => false,
'scales' => [
'xAxes' => [],
'yAxes' => [
[
'ticks' => [
'beginAtZero' => true,
],
],
],
],
]);
$projectProgress[$ctr]->labels($days)
->minimalist(false)
->height(300)
->width(100)
->options([
'maintainAspectRatio'=>false,
'scales'=>[
'xAxes'=>[
['display'=>false]
]
]
]);
Charts JS working fine but when i jumper to other page this gives me an error. please help me.
THis is my footer page
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!
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
Undefined variable: salesChart (View: C:\xampp\htdocs\Gestion_Politica\resources\views\users.blade.php)
hola ariel tengo ese error siguiendo tu tutorial
Hola lograste resolver? puede ser porque no enviaste la variable salesChart a la vista, puedes probar primero a debugear si la variable existe con:
Si tiene valores puedes pasar el valor a la vista:
Hi folks! thanks for comment to this post, I feel very happy about this post and all the interaction, I really feel that something is missing around this post, when I read your comments I feel that maybe another implementation is needed, some comments makes me feel like you expect some more functunallity or more features, so I decide to create a new package to provide a apex chart library wrapper for Laravel so you can read my most recent post about it here: dev.to/arielmejiadev/create-charts... and to get more info about the package you can visit the documentation site here: arielmejiadev.github.io/LarapexCha... thanks for all your support and thanks for reading.
you used $salesChart instead of $usersChart in users.blade.php
Well you got the idea ;)
Is there a way to use icon as Label inside setLabel()? For example:
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.