Download the PHP package larawire-garage/larapex-livewire without Composer
On this page you can find all versions of the php package larawire-garage/larapex-livewire. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download larawire-garage/larapex-livewire
More information about larawire-garage/larapex-livewire
Files in larawire-garage/larapex-livewire
Package larapex-livewire
Short Description Laravel wrapper for ApexCharts javascript plugin advanced features with livewire
License MIT
Informations about the package larapex-livewire
Larapex Livewire
Laravel wrapper for ApexCharts javascript plugin advanced features with livewire
👉 Support Livewire 3
👉 Support JS Callback Functions
👉 Support Light, Dark Themes
Installation
Publish configurations
Publish assets
Add Scripts
add @larapexScripts
blade directive end of the body tag and before other scripts in main app layout file
If you want to use chart only in sub pages or livewire component and need to push scripts to specific stack add stack name to script_section in larapex-livewire.php
config file
Make a chart
and Select a Chart Type from
- Area Chart
- Bar Chart
- Brush Chart
- Donut Chart
- Line Chart
- Pie Chart
then its generate a chart class.
Fill Data
Chart class is a normal livewire class and you can use livewire features inside the class. For example event_listeners, parse value through mount() method etc.
Add data generating code in dataSource()
function and use it to fill data in build()
method.
Add chart to page
add chart like any other livewire component into the blade file
Use chart class namespace in dot notation and all in slug format for chart component name in
@livewire()
blade directive.
example:
app/Http/Livewire/TestChart.php Class can use as 'test-chart'.
app/Http/Livewire/Charts/TestChart.php Class can use as 'charts.test-chart'.
Customize Chart
Can use any option except javascript callback functions as a array using set
functions
- setChart()
- setColors()
- setDataLabels()
- setFill()
- setForecastDataPoints()
- setGrid()
- setLabels()
- setLegend()
- setMarkers()
- setNoData()
- setDataset()
- setStates()
- setStroke()
- setSubtitle()
- setTheme()
- setTitle()
- setTooltip()
- setPlotOptions()
- setXAxis()
- setYAxis()
- setAnnotations()
also ApexChart has few helper functions
- sparklineEnable(bool $enable)
- colors(array $colors)
- randomColors(int $limit)
- showDataLabels(bool $show)
- dataLabelsTextAnchor(string $anchor)
- dataLabelsStyles(array $styles)
- fillColors(array $colors)
- fillType(string $type)
- fillOpacity(float $opacity)
- fillSolid(array $colors)
- fillGradient(array $fromColors, array $toColors, array $others, string $shade, string $direction, array $colorStops, array $customStops)
- showGrid(bool $show)
- setGridInfo(array $info)
- labels(array $labels)
- markers(array $colors,int $width,int $hoverSize, array $others)
- noData($text, string $halign, string $valign, array $others)
- stroke(int $width, array $colors, string $curve, array $others)
- curve(string $curve)
- subtitle(string $subtitle, string $position, array $others)
- theme(string $mode, array $others)
- title(string $title, string $align, array $others)
- showTooltip(bool $show)
- tooltip(bool $show, string $theme, bool $fillSeriesColor, array $others)
- xAxis(array $categories, string $type, string $title, array $others)
- xAxisType(string $type)
- xAxisTickPlacement(string $placement)
- yAxis(bool $show, array $others)
- zoom(bool $enable, string $type, array $others)
- annotations(array $options)
Overwrite configs
- background(string $color)
- foreColor(string $color)
- fontFamily(string $fontFamily)
- height(string $height)
- width(string $width)
Livewire 3 Support
==================== New Chart Events ====================
refresh:chart
- update only data seriesupdate:chart:options
- update all optionsExperimental
reset:chart
- reset zoom etc.Experimental
delete:chart
- remove chart element from DOM
This events Simple Chart & Brush Chart both supported.
Usage :
Js Callback Function Support
If you need to add custom callback functions for something like formatters, you can use function. In function first Parameter is array key path in dot notation. And JS Callback function string needs to pass as second parameter.
You can also use
heredoc syntax
andnowdoc syntax
instead of regular string when defined js function
Usage :
Light, Dark Themes Support
You can change theme of the chart. In the configs you can customize the background and font colors for each light and dark theme. if you set default theme to "auto"
, chart use OS color scheme [light or dark].
⚠ If you migrate from v1.x, you needs to re-publish config file with
--force
option to replace new config file.
You can change the theme in the chart component using chart's theme()
function.
You can change and customize the theme in the configs
▶ Only supports light, dark, auto themes.
▶ Only supports background_color & font_color attrubutes of the theme.
Also chart listening to themeChanged
javascript custom event.
⚠
themeChanged
event listener looking forevent.detail.theme
key for theme string.
Inspiration
Highly inspired by Larapex Charts Package.
!!! :tada::tada::tada: Enjoy :tada::tada::tada: !!!