->options() not working as expected

[edstevo]

Hello,

I have been having issues getting the options to work for the chart. For example, the axis labelling wasn't working.

I'm using a plugin which is delivering my template using an anonymous livewire template.

If I use the ->livewire() method is leaves an error message because "$this->model" isn't accessible in the "chart-template-livewire.blade.php" file.

If I remove the livewire() method, it is ok if I remove the if function around the $options variable in "chart-template.blade.php". See attached screenshots.

I tried a pull request, but it reverted back to the original repository.

[edstevo]

Hey - anything on this? Thanks

[peterthomson]

Hi there, We have an update for the Livewire pattern coming soon that may fox this. In the meantime you could try optionsRaw() with a json syntax to see if that's better or try a normal livewire component where you can control the public properties and methods better than in an anonymous component. If you share a bit more about what you're trying to achieve it'll help make sure tbe livewire upgrade works for your use case.

[edstevo]

Ok great news, I'll keep a look out.

I'm using this in combination with Filamentphp, and actually the TipTap extension (https://v2.filamentphp.com/plugins/tiptap) through the use of custom blocks: https://github.com/awcodes/filament-tiptap-editor#user-content-custom-blocks

I input the datapoints into a form, which is then stored in the database. Through the tiptip editor the chart is rendered using this view:

@foreach(\App\Helpers\Charts::workingConditions($groups) as $index => $chart)

    <figure class="chart w-full print:w-full">
        @if (array_key_exists('name', $groups[$index]) && $groups[$index]['name'])
            <h4>{{ $groups[$index]['name'] }}</h4>
        @endif
        {!! $chart->render() !!}
        <figcaption class="text-center italic">Intermediate pressure ratings shall be obtained by interpolation</figcaption>
    </figure>

@endforeach

which is then supported by this class via a facade.

<?php

namespace App\Services;

use Illuminate\Support\Collection;

class ChartService
{

    protected $seriesColors = [
        "#CC1517",
        "orange",
        "green",
        "cyan"
    ];

    public function workingConditions(array $groups): Collection
    {
        return collect($groups)->map(function ($group, $index) {
            return app()->chartjs
                ->name("chart_".$index)
                ->type("scatter")
                ->size(["width" => "auto", "height" => 200])
                ->labels(collect($group["series"])->pluck("name")->toArray())
                ->datasets(collect($group["series"])->map(function ($series, $index) {
                    return [
                        "label" => $series["name"],
                        "showLine" => true,
                        "backgroundColor" => $this->seriesColors[$index],
                        "pointBackgroundColor" => $this->seriesColors[$index],
                        "borderColor" => $this->seriesColors[$index],
                        "borderWidth" => 2,
                        "pointRadius" => 4,
                        "pointHoverBorderColor" => "#FFF",
                        "data" => $series["data"]
                    ];
                })->toArray())
                ->options([
                    "responsive" => true,
                    "devicePixelRatio" => 3,
                    "animation" => [
                        "duration" => 0,
                    ],
                    "plugins" => [
                        "legend" => [
                            "position" => "top",
                            "align" => "end"
                        ],
                    ],
                    "scales" => [
                        "x" => [
                            "title" => [
                                "display" => true,
                                "text" => $group["xLabel"]
                            ],
                        ],
                        "y" => [
                            "title" => [
                                "display" => true,
                                "text" => $group["yLabel"]
                            ],
                        ]
                    ],
                ])
            ;
        });
    }
}

As I say, everything is fine except for the options. Currently the charts are displaying without axis labels:

Looking forward to the update.

[peterthomson]

Just tagged release v1.4 which works with more patterns for options eg options(), optionsRaw() and no options at all. Maybe have a go and see if the updated code works for your situation now.