I am trying to use the functionality of chartjs-plugin-zoom in my laravel application but I cant't get it to work.
In the blade I am loading the plugin through Cloudflare cdnjs:
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="some-long-string" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/2.0.1/chartjs-plugin-zoom.min.js" integrity="some-other-long-string" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Then in the controller I create some chart to feed it to the view, setting some plugin specific options:
$chart = new ReadOutChart();
// Fill chart with data
$chart->options([
'plugins' => '{zoom: {zoom: { wheel: {enabled: true, mode: \'xy\'}}}}'
]);
where ReadOutChart is a chart building on the ConsoleTVs\Charts\Classes\Chartjs\Chart class.
Then again in the blade I plot the chart with:
<div>
{!! $chart->container() !!}
</div>
{!! $chart->script() !!}
The chart is shown correctly, but non of the plugin functionality seems to work. I had a hard time getting to this point since I could not find a lot of documentation about using ChartJS plugins in laravel. The most helpful info I could find was here.
Do you spot a mistake or know how to get it working?
Additional info:
Due to inexperience, bad code design and absentmindedness I was loading ChartJS below the plugin. Moving the line before the loading of the plugin solved the issue:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js" integrity="..." crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="..." crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/2.0.1/chartjs-plugin-zoom.min.js" integrity="..." crossorigin="anonymous" referrerpolicy="no-referrer"></script>