Allow charts to construct multiple fragments of line

[joffreypersia]

Flux version

v2.0.6

Livewire version

v3.6.2

Tailwind version

v4.0.14

Browser and Operating System

All

What is the problem?

I would like to construct a chart line that have different color based on its portion (to display past / present / futur). Many errors in console might be related to the construction of the portions of the line.

Code snippets

php artisan make:livewire chartTest

The class :

<?php

namespace App\Livewire;

use Livewire\Component;

class ChartTest extends Component
{
    public array $dataset = [];

    public function mount()
    {
        $this->dataset = [
            [
                'date' => '2025-03-15',
                'count' => 10,
            ],
            [
                'date' => '2025-03-16',
                'count' => 12,
            ],
            [
                'date' => '2025-03-17',
                'count' => 8,
            ],
            [
                'date' => '2025-03-18',
                'count' => 15,
            ],
            [
                'date' => '2025-03-19',
                'count' => 20,
            ],
            [
                'date' => '2025-03-20', // Yesterday
                'count' => 18,
                'now' => 18,
            ],
            [
                'date' => '2025-03-21', // Today
                'now' => 14,
            ]
        ];
    }

    public function render()
    {
        return view('livewire.chart-test');
    }
}

and its view :

<div>
    <flux:chart wire:model="dataset" class="aspect-3/2 md:aspect-3/1">
        <flux:chart.svg>
            <flux:chart.line field="count" class="text-blue-500 dark:text-blue-400" curve="none" />
            <flux:chart.point field="count" class="text-blue-500 dark:text-blue-400" />

            <flux:chart.line field="now" class="text-blue-500 dark:text-blue-400" curve="none" stroke-width="2" stroke-dasharray="4,4" />

            <flux:chart.axis axis="y">
                <flux:chart.axis.grid />
                <flux:chart.axis.tick />
            </flux:chart.axis>

            <flux:chart.axis axis="x" field="date" :format="['month' => 'short', 'day' => 'numeric']" >
                <flux:chart.axis.tick />
                <flux:chart.axis.line />
            </flux:chart.axis>
        </flux:chart.svg>
    </flux:chart>
</div>

How do you expect it to work?

I would like to construct data with lines from different sections and values without having to have the data on all the timeframe.

Like Plausible does :

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[joshhanley]

@joffreypersia thanks for reporting! I've converted this to a feature request as Flux's charts don't currently support this.

[joffreypersia]

Oh ok ! I understand

Guys, please upvote the feature :D