Laravel Question posted in
The official Laravel Documentation can be found here.

How to use chartjs-plugin-zoom in laravel

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 ConsoleTVsChartsClassesChartjsChart 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:

  • laravel version: 10.16.1
  • consoletvs/charts version: 6.6.0
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 0

    It seems like you’re doing everything correctly. However, the issue might be with how you pass the options to the chart. The options should be an associative array, not a string.

    $chart->options([
    'plugins' => [
        'zoom' => [
            'zoom' => [
                'wheel' => [
                    'enabled' => true,
                    'mode' => 'xy'
                ]
            ]
        ]
    ]
]);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search