Download the PHP package maartenpaauw/laravel-charts-css without Composer
On this page you can find all versions of the php package maartenpaauw/laravel-charts-css. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download maartenpaauw/laravel-charts-css
More information about maartenpaauw/laravel-charts-css
Files in maartenpaauw/laravel-charts-css
Package laravel-charts-css
Short Description Laravel components to create beautifully Charts.css charts.
License MIT
Homepage https://github.com/maartenpaauw/laravel-charts-css
Informations about the package laravel-charts-css
Laravel component to create gorgeous Charts.css charts.
This package will help you generate CSS only charts based on the Charts.css library.
Installation
You can install the package via composer:
Usage
Here's how you can create a chart:
This will generate a chart component within the View/Components
namespace.
To display your chart it is as easily as adding the following blade component:
Make sure you import the css library as well. There is a helper component available for it!
Advanced
See all Charts.css documentation examples within the src/Examples
directory or read all the advanced documentation below to learn more.
Tooltips
It is possible to configure a tooltip for each entry like this:
Single dataset
The default generated chart component shows you how you can provide multiple datasets. If you only want to show a single dataset, you still need to wrap in within a datasets instance. This is because axes must be provided. The only difference is you need to provide the data axis via the entry and give a global description via the axes.
Hiding a specific label
You can hide an entry's label by calling the hideLabel()
method on a dataset.
Alignment of a specific label
You can align an entry's label by calling the alignLabel()
method on a dataset with start
, center
or end
as parameter.
Multiple datasets
Hiding a specific label
You can hide a dataset's label by calling the hideLabel()
method on a dataset.
Hiding a specific label
You can align a dataset's label by calling the alignLabel()
method on a dataset with start
, center
or end
as parameter.
Stacked datasets
If you want your chart data to be stacked, you can wrap the datasets instance within a SimpleStackedDatasets
or a
PercentageStackedDatasets
decorator. The smart configuration will automatically add the Stacked
modification.
Stylesheet
Warning! Make sure you insert this component within your base layout template where your chart is not directly used. Otherwise a custom defined colorscheme won't be pushed to the CSS stack.
Charts.css host the production CSS file on two difference CDN's: jsdelivr
and unpkg
.
You can import the stylesheet by adding the following component to the head within your blade file.
If you add your CSS by using a different way, for example a package manager, you can leave out the cdn
attribute.
Then this component will only be used to render the colorscheme definitions.
Type
At the moment there is support for 4 types of charts:
Area
Bar
Column
Line
By default, each generated chart is a Column
chart. If you want to change the chart type you can overwrite the type
method, or you can inherit the AreaChart
, BarChart
or LineChart
class instead of the Chart
class.
When using an area
or line
chart, you must determine the start of the chart by calling the start
method on the first
entry like this:
Legend
By default, no legend is being generated and shown. You can change this behaviour by simply overwriting the legend()
method.
By calling the withLabel()
or withLabels()
method on a Legend
instance you can add a label.
By default, the legend is displayed vertically. You can change it to horizontally by chaining the inline()
method.
The labels do not have any style by default. You can change the shape by calling one of the following methods:
circles()
ellipses()
lines()
rectangles()
rhombuses()
squares()
By default the HTML tag ul
is used to display the legend on the screen. If you prefer an ol
HTML tag chain the
ordered()
method.
Colorscheme
Warning! Do not forget to add the
<x-charts-css-stylesheet />
to your layout's head.
The framework has a set of 10 default color repeating themselves.
You can change it by overwriting the colorscheme()
method.
If you only add one color, all the data entries will get the same color.
You can add up to 10 colors by calling the add()
method on the colorscheme.
It is also possible to return a new instance of Colorscheme
and given an array with colors as the first constructor parameter.
Specific color for one entry
Want to change a specific data entry's color? This can be done by chaining the color
method.
Modifications
By overwriting the modifications()
method you can add multiple modifications.
Out of the box the ShowHeading
modification will be applied when the heading is present
and the modifications Multiple
and ShowLabels
are applied when there are multiple datasets configured.
All modifications can be found within the Maartenpaauw\Chartscss\Appearance
namespace.
Data(sets) spacing
By adding DatasetsSpacing
or DataSpacing
you can configure the space between the data entries. Both constructors accept a number between 1 and 20 defining the amount of space.
Hide data
The HideData
modification will hide the display value of each entry.
The value will still be printed to the screen, but it is hidden by CSS.
This will respect screenreaders.
Show data on hover
The ShowDataOnHover
modification will hide the data the same way as the HideData
modification.
The big difference is it will show the data when you hover it.
Label alignment
You can configure the label alignment by adding one of the following modifications: LabelsAlignStart
, LabelsAlignCenter
or LabelsAlignRight
.
Multiple
`
When displaying multiple datasets the modification Multiple
needs to be added.
Out of the box it is automatically added if there are multiple datasets.
Reverse
If you want to reverse the data, datasets or the orientation you can add the modifications:
ReverseData
, ReverseDatasets
or/and ReverseOrientation
.
Axes
By default, no axes are shown. You can show the primary axis by adding the ShowPrimaryAxis
.
Same goes for the ShowDataAxes
.
To display the secondary axes you can add the ShowSecondaryAxes
modification.
The constructor accepts the amount of axes (with a limit of 10) as the first parameter.
Show heading
`
The heading (table caption) will always be printed to the screen to respect screenreaders,
but it will be hidden with CSS by default. If you want to display the heading you need to add the ShowHeading
modification.
This modification will be added automatically when the heading is present.
Show labels
`
The labels will always be printed to the screen to respect screenreaders,
but they are hidden with CSS by default. If you want to display the labels you need to add the ShowLabels
modification.
Stacked
`
If you want to stack multiple datasets you can add the Stacked
modification. This is done automatically (via the smart
configuration) if you wrapped your datasets instance within a SimpleStackedDatasets
or PercentageStackedDatasets
decorator
Did I miss adding a modification?
`
Feel free to create a pull request or submitting an issue.
In the meanwhile you can add it easily by adding a CustomModification
.
Configuration
As mentioned before, the configuration is pretty smart. It adds a ShowHeading
modification if a heading is present,
adds the modifications Multiple
when multiple datasets are present, it adds the ShowLabels
modification when there
are dataset or entry labels defined, and it uses the configured data axes as legend labels when none has been specified.
If you wrap your datasets instance within a SimpleStackedDatasets
or PercentageStackedDatasets
decorator, it will
automatically add the Stacked
modification.
This is done by wrapping the configuration within a SmartConfiguration
decorator. If you do not want this behaviour
you can overwrite the configuration
method and build the configuration by yourself.
`
Wrapper div
If a legend is configured the chart will be wrapped in a div
. If you want to change the HTML tag you can overwrite the
tag()
method.
Testing
Changelog
Please see CHANGELOG for more information on what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security Vulnerabilities
Please review our security policy on how to report security vulnerabilities.
Credits
- Maarten Paauw
- All Contributors
License
The MIT License (MIT). Please see License File for more information.
All versions of laravel-charts-css with dependencies
illuminate/contracts Version ^8.37|^9.6
maartenpaauw/laravel-specification-pattern Version ^1.1
spatie/laravel-package-tools Version ^1.11