How to add Highchart in a custom widget

Hi, I need help. I've been trying to incorporate a custom widget that renders a HighChart map, however, it doesn't work for me. Register the cdn in the AppServiceProvider boot: public function boot(): void { FilamentAsset::register([ Js::make('highcharts-script', 'https://code.highcharts.com/maps/highmaps.js'), Js::make('highcharts-map-module', 'https://code.highcharts.com/maps/modules/map.js'), Js::make('highcharts-world-map', 'https://code.highcharts.com/mapdata/custom/world.js'), ]); } However, I don't know how to apply it in the blade view <x-filament-widgets::widget> <x-filament::section> <div id="container-map" style="width: 100%; height: 400px;"></div> </x-filament::section> </x-filament-widgets::widget> <div x-data="{}" x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('highcharts-script')), @js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('highcharts-world-map'))]" > <script> document.addEventListener('DOMContentLoaded', function() { Highcharts.mapChart('container-map', { chart: { map: 'custom/world' }, title: { text: 'Mapa interactivo con Highcharts' }, series: [{ name: 'Países', color: '#E0E0E0', enableMouseTracking: true }] }); }); </script> </div> The CDN loads correctly, but my script doesn't work
No description
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server