Joshlete commented 11 months ago

I am a beginner to laravel, and I need to customize the graph to have annotation. This is in my livewire component:

$chart = (new LineChartModel())
            ->setTitle('Simple Chart')
            ->addPoint(10, 30)
            ->addPoint(20, 40)
            ->addPoint(30, 50)
            ->setJsonConfig(json_encode([
                'annotations' => [
                    'xaxis' => [
                        [
                            'x' => 15,
                            'x2' => 25,
                            'borderColor' => '#775DD0',
                            'label' => [
                                'text' => 'Annotation Label',
                                'style' => [
                                    'color' => '#6B5',
                                    'background' => '#775DD0',
                                ],
                            ],
                        ],
                    ],
                ]
            ]));

$lineChartModels[] = $chart;

And I return is like this:

return view('livewire.livepos-chart', [
            'lineChartModels' => $lineChartModels
        ]);

This is in the blade file:

<div>
    @foreach($lineChartModels as $lineChartModel)
        <div style="height: 500px">
            <livewire:livewire-line-chart :line-chart-model="$lineChartModel" />
        </div>
    @endforeach
</div>

But this is what I am getting:

Ive tried by using json_encode and without using it. I've tried to simplify it as much as possible. But I am not getting any change from using setJsonConfig(). Am I doing something wrong?

faakher commented 11 months ago

as the docs suggest, while using ->setJsonConfig, you must use dot (.) notation to add nested keys, no need to pass multi array or json_encode. Instead of passing an array of multiple arrays you should use like this:

->setJsonConfig([
    'fill.type' => 'gradient',
    'fill.gradient.shade' => '',
    'fill.gradient.shadeIntensity' => 0.8,
    'fill.gradient.opacityFrom' => 0.6,
    'fill.gradient.opacityTo' => 0.1,
    'tooltip.enabled' => false,
    'xaxis.show' => true,
    'xaxis.lines.show' => false,
    'xaxis.labels.show' => false,
    'xaxis.stroke.width' => 0,
    'xaxis.axisBorder.show' => false,
    'chart.toolbar.show' => false,
    'chart.height' => 90,
    'markers.colors' => 'transparent',
    'markers.strokeColors' => 'transparent',
    'grid.show' => false,
])

hope it will help you

Joshlete commented 11 months ago

$chart = (new LineChartModel())
                ->addPoint(10, 30)
                ->addPoint(20, 40)
                ->addPoint(30, 50)
                ->setJsonConfig([
                    'xaxis.show' => false,
                    'title.text' => 'Basic Line Chart',
                    'title.align' => 'left',
                    'chart.background' => '#f0f0f0'
            ]);

That is helpful advice, thank you. Unfortunately, it is still not working. xaxis still shows up, background doesn't change, I can't get a single thing in the setJsonConfig() function to work.