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

@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/

Jump to solution

Solution

Jordy•1/3/25, 9:57 AM

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