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:
However, I don't know how to apply it in the blade view
The CDN loads correctly, but my script doesn't work
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
