Download the PHP package asantibanez/livewire-charts without Composer
On this page you can find all versions of the php package asantibanez/livewire-charts. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download asantibanez/livewire-charts
More information about asantibanez/livewire-charts
Files in asantibanez/livewire-charts
Package livewire-charts
Short Description Livewire Charts
License MIT
Homepage https://github.com/asantibanez/livewire-charts
Informations about the package livewire-charts
Preview
Demo
https://github.com/asantibanez/livewire-charts-demo
Installation
You can install the package via composer:
Next, you must export the package public scripts. To do this run
This command will export a vendor/livewire-charts
folder under the public
directory of your app which is used
by the @livewireChartsScripts
directive. More on this topic later.
Requirements
This package requires the following packages/libraries to work:
Laravel Livewire v3
(https://livewire.laravel.com/)Apex Charts
(https://apexcharts.com/)
Please follow each package/library instructions on how to set them properly in your project.
Note: At the moment,
Apex Charts
is only supported for drawing charts.
Usage
Livewire Charts supports out of the box the following types of charts
- Line/Multi Line Chart (
LivewireLineChart
component) - Pie Chart (
LivewirePieChart
component) - Column/Multi Line Chart (
LivewireColumnChart
component) - Area Chart (
LivewireAreaChart
component) - Radar Chart (
LivewireRadarChart
component) - Tree Map Chart (
LivewireTreeMapChart
component) - Radial Chart (
LivewireRadialChart
component)
Each one comes with its own "model" class that allows you to define the chart's data and render behavior.
LivewireLineChart
usesLineChartModel
to set up data points, markers, events and other ui customizations.LivewirePieChart
usesPieChartModel
to set up data slices, events and other ui customizations.LivewireColumnChart
usesColumnChartModel
to set up data columns, events and other ui customizations.LivewireAreaChart
usesAreaChartModel
to set up data points, events and other ui customizations.LivewireRadarChart
usesRadarChartModel
to set up data points, events and other ui customizations.LivewireTreeMapChart
usesTreeMapChartModel
to set up data blocks, events and other ui customizations.LivewireRadialChart
usesRadialChartModel
to set up data bars, events and other ui customizations.
For example, to render a column chart, we can create an instance of ColumnChartModel
and add some data to it
Note: Chart model methods are chainable 💪
With $columnChartModel
at hand, we pass it to our LivewireColumnChart
component in our Blade template.
Note: Optionally add "key" to enable props reactivity if needed 💪
Next, include the @livewireChartsScripts
directive next to your other app scripts
And that's it! You have a beautiful rendered chart in seconds. 👌
Note: You can use these charts inside other Livewire components too. Just render them in your Blade template and you are good to go. 👍
LivewireCharts facade
Chart models can also be created using the LivewireCharts
facade.
Enabling Interactions
To enable click events, you must use the with[XXX]ClickEvent($eventName)
method present in every model class and
define a custom $eventName
that will be fired with the corresponding data when a column/marker/slice is clicked.
Here we define an onColumnClick
event that will be fired when a column is clicked in our chart.
We can listen to the onClickEvent
registering a listener in any other Livewire component.
"Reactive" Charts
You can use livewire-charts components as nested components in you Livewire components. Once rendered, charts will
not automatically react to changes in the $model
passed in. This is just how Livewire works.
However, to enable "reactivity" when data passed in changes, you can define a special $key
to your components so they are fully re-rendered each time the chart data changes.
Each model class comes with a reactiveKey()
method that returns a string based on its data. If any of the properties
are changed, this key will update accordingly and re-render the chart again.
In the following example, a parent component houses both column chart and pie chart and defines a $model
for each one.
The parent component renders the charts as follows
When the parent component changes their respective models, charts will automatically re-render itself.
Charts API
For each chart, a specific model class needs to be used. Here, it is detailed the api available for each type of chart.
All
Method | Description |
---|---|
setTitle(string $title) | Sets chart title |
setAnimated(boolean $animated) | Enables/disables animation |
setDataLabelsEnabled(boolean $enabled) | Enables/disables data labels |
withDataLabels() | Enables data labels |
withoutDataLabels() | Disables data labels |
withLegend() | Shows legends |
withoutLegend() | Hides legends |
setColors(array $colors) | Set colors for chart |
addColors(string $color) | Append $color to $colors set |
setXAxisCategories(array $categories) | Enables custom categories for chart X Axis |
sparklined() | Enables Apex Charts sparkline feature |
setSparklineEnabled(boolean $isEnabled) | Enables/Disables Apex Charts sparkline feature |
setJsonConfig(array $config) | Adds extra customization to charts by passing Apex charts properties keys and values. Nested keys must be added using dot (.) notation |
LivewireLineChart
Method | Description |
---|---|
multiLine() | Adds multiline support for line chart |
singleLine() | Adds single support for line chart |
addPoint(string $title, double $value, array $extras = []) | Adds a point to a single line chart. $extras is forwarded on click event |
addSeriesPoint(string $seriesName, string $title, double $value, array $extras = []) | Adds a point to series to a multi line chart. $extras is forwarded on click event |
addMarker(string $title, double $value) | Adds a marker point to the line chart. Markers are used to emphasize particular points in the chart (singleLine only) |
withOnPointClickEvent(string $eventName) | Event Name that will be fired when a point/marker of the chart is clicked |
LivewireColumnChart
Method | Description |
---|---|
setOpacity(int $opacity) | Sets columns' opacity |
setColumnWidth(int $columnWidth) | Sets columns' width |
setHorizontal() | Displays columns horizontally |
setVertical() | Displays columns vertically |
multiColumn() | Sets chart to display multiple column series |
singleColumn() | Sets chart to display a single column series |
stacked() | Sets chart to display column series stacked |
addColumn(string $title, double $value, string $color, array $extras = []) | Adds a column to the chart with the specified color. $extras is forwarded on click event |
addSeriesColumn(string $seriesName, string $title, double $value, array $extras = []) | Adds a column to a multicolumn chart. $extras is forwarded on click event |
withOnColumnClickEventName(string $eventName) | Event Name that will be fired when a column of the chart is clicked |
LivewirePieChart
Method | Description |
---|---|
setOpacity(int $opacity) | Sets slices' opacity |
asPie() | Displays chart as pie |
asDonut() | Displays chart as donut |
addSlice(string $title, double $value, string $color, array $extras = []) | Adds a slice to the chart with the specified color. $extras is forwarded on click event |
withOnSliceClickEvent(string $eventName) | Event Name that will be fired when a column of the chart is clicked |
LivewireAreaChart
Method | Description |
---|---|
addPoint(string $title, double $value, array $extras = []) | Adds a point to the area chart. $extras is forwarded on click event |
withOnPointClickEvent(string $eventName) | Event Name that will be fired when a point of the chart is clicked |
setXAxisVisible(boolean $visible) | Shows/hides xAxis labels |
setYAxisVisible(boolean $visible) | Shows/hides yAxis labels |
LivewireRadarChart
Method | Description |
---|---|
addSeries(string $seriesName, string $title, double $value, array $extras = []) | |
withOnPointClickEvent(string $eventName) | Event Name that will be fired when a point of the chart is clicked |
LivewireTreeMapChart
Method | Description |
---|---|
addBlock(string $title, double $value, array $extras = []) | Adds a block to the default series |
addSeriesBlock(string $seriesName, string $title, double $value, array $extras = []) | Adds a block to the specified series |
withOnBlockClickEvent(string $eventName) | Event Name that will be fired when a block of the chart is clicked |
setDistributed(bool $distributed) | Set whether the chart uses distribution or not |
LivewireRadialChart
Method | Description |
---|---|
addBar(string $title, double $value, string $color = null, array $extras = []) | Adds a bar to the default series |
withOnBarClickEvent(string $eventName) | Event Name that will be fired when a bar of the chart is clicked |
showTotal() | Show the total percetage to the graph |
hideTotal() | Hides the total percetage to the graph |
Advanced Usage - Integrating Scripts
The directive @livewireChartsScripts
adds a script
tag that includes public/vendor/livewire-charts/app.js
.
If you want to include this script in your build system, you can export the package scripts
with php artisan vendor:publish
and selecting livewire-charts:scripts
. This will export js/vendor/livewire-charts
inside your resources folder. You can then adjust imports as you see fit in your project.
Note: You must remove @livewireChartsScripts directive so it doesn't clash with the scripts in your build system.
Advanced Usage - Custom Json Configs
The setJsonConfig()
method on every chart allows adding custom Apex properties not provided first hand by the package.
This means that any chart property supported by Apex chart can be passed down using this method.
Note: If you want to add nested properties, you can use dot (.) notation for this matter.
You can even pass down simple JS functions. For example, for formatting you can pass down your own closure
Troubleshooting
Chart components must be placed inside a container with fixed height. This is because the chart will use all the given vertical space. A fixed height is needed to render properly.
Note: if a fixed height is not given, the chart will grow vertically infinitely. That's not what we want, right?
Testing
Changelog
Please see CHANGELOG for more information what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
Credits
- Andrés Santibáñez
- All Contributors
License
The MIT License (MIT). Please see License File for more information.
All versions of livewire-charts with dependencies
illuminate/support Version ^7.0|^8.0|^9.0|^10.0|^11.0
livewire/livewire Version ^3.0