Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
kuchienkz opened this issue Mar 13, 2023 · 5 comments
Open

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

kuchienkz opened this issue Mar 13, 2023 · 5 comments

Comments

@kuchienkz
Copy link

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
Copy link

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
Copy link
Author

kuchienkz commented May 9, 2023

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
Copy link

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

@kuchienkz
Copy link
Author

kuchienkz commented May 10, 2023

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants