F
Filament•3w ago
Jordy

Export ChartWidget to image

I'd like to export a ChartWidget to an image to render in a PDF, i've tried rendering the chart in the pdf but it doesnt work (didnt expect it to, tbh). I'm using dompdf I found this article https://quickchart.io/documentation/chart-js/image-export/ but this would be kinda dirty to implement with calling raw JS any ideas or alternative chart plugins that support exports to images?
Solution:
this might be the worst code I've ever written, but I ended up building the chart in a livewire component, and then sending the image to the backend inside a script tag ```js @script <script>...
Jump to solution
1 Reply
Solution
Jordy
Jordy•3w ago
this might be the worst code I've ever written, but I ended up building the chart in a livewire component, and then sending the image to the backend inside a script tag 
@script
<script>
    Livewire.dispatch('saveImage', {base64: chart{{ $product->name }}.toBase64Image('image/png', 1)});
</script>
@endscript
@script
<script>
    Livewire.dispatch('saveImage', {base64: chart{{ $product->name }}.toBase64Image('image/png', 1)});
</script>
@endscript
Issues I encountered: image would be empty if I didnt disable animations or set a timeout (this sucks, so i disabled entirely)https://www.chartjs.org/docs/latest/configuration/animations.html Had quite some issues getting chartjs to work (I needed it outside of the filament panel aswell, so I ended up using this package which works pretty well. If you give the charts a unique name you can easily fetch them with JS using their name. https://icehouse-ventures.github.io/laravel-chartjs/

Did you find this page helpful?