asantibanez / livewire-charts

Neat Livewire Charts for your Laravel projects
MIT License
787 stars 116 forks source link

How can I export the chart into PNG, JPG, CSV, etc? #89

Open kuchienkz opened 1 year ago

kuchienkz commented 1 year ago

I believe this is supported by Apex Charts, but I don't see any option/method (on the Readme) to show the Export/Download menu for the generated charts.

dadegeest commented 1 year ago

You can intergrating the scripts as descriped here (https://github.com/asantibanez/livewire-charts#advanced-usage---integrating-scripts) and set toolbar.show to true in e.g. columChart.js

toolbar: { show: true },

This will show the toolbar with the download option on the chart

kuchienkz commented 1 year ago

I followed your guide https://github.com/asantibanez/livewire-charts#advanced-usage---integrating-scripts, but unfortunately im quite new with Laravel, so I cannot fully understand your guide on this part: ...You can then adjust imports as you see fit in your project.

How can I import the published scripts?

I tried to import the published js/vendor/livewire-charts/app.js to my main js js/app.js, something like this: import './vendor/livewire-charts/app';

Im using Vite btw, in my main layout app.blade.php: @vite([ 'resources/js/app.js' ])

But it does not work. The page loaded with empty charts and errors: image

dadegeest commented 1 year ago

I use require('./vendor/livewire-charts/app'); in my app.js

kuchienkz commented 1 year ago

Tried to put require('./vendor/livewire-charts/app'); on top, still does not work. Can you show me your full main app.js ?

Here is mine:

require('./vendor/livewire-charts/app');
import './bootstrap';
import '../css/app.css';
import Alpine from 'alpinejs'
import Focus from '@alpinejs/focus'
import FormsAlpinePlugin from '../../vendor/filament/forms/dist/module.esm'
import NotificationsAlpinePlugin, { Notification } from '../../vendor/filament/notifications/dist/module.esm'
import Clipboard from '@ryangjchandler/alpine-clipboard'
import AlpineFloatingUI from '@awcodes/alpine-floating-ui'

window.FilamentNotification = Notification

Alpine.plugin(Focus)
Alpine.plugin(FormsAlpinePlugin)
Alpine.plugin(NotificationsAlpinePlugin)
Alpine.plugin(AlpineFloatingUI)
Alpine.plugin(Clipboard)

window.Alpine = Alpine
Alpine.start()
mnluribef commented 1 year ago

I have the same problem, did you find a solution?