Chart

Use this wrapper around the D3 plotting library to display a line chart with cursor. Optionally add controls, eg. to swap the chart data.

The chart is client-rendered and may need a few seconds to load and render. You can use the component slot to display placeholders, eg. an Empty State component.

'data' => false,
'id' => 'uid-' . uniqid(),
'controls' => false,

Keine Daten vorhanden.

 
<x-chart class="h-[400px]" id="demo-peformance-1" data="/data/sample-year.csv">
    <x-emptyState illustration="tabler-database-search" size="sm">
        <p>Keine Daten vorhanden.</p>
    </x-emptyState>
</x-chart>

Keine Daten vorhanden.

 
<x-chart class="h-[400px]" id="demo-peformance-2" data="/data/sample-year.csv">
    <x-emptyState illustration="tabler-database-search" size="sm">
        <p>Keine Daten vorhanden.</p>
    </x-emptyState>
    <x-slot:controls>
        <x-segmentedButton selectable="single">
            <x-segmentedButtonItem data-target="demo-peformance-2" data-chartdata="/data/sample-day.csv" label="1 Tag" />
            <x-segmentedButtonItem data-target="demo-peformance-2" data-chartdata="/data/sample-week.csv" label="1 Woche" />
            <x-segmentedButtonItem data-target="demo-peformance-2" data-chartdata="/data/sample-month.csv" label="1 Monat" />
            <x-segmentedButtonItem data-target="demo-peformance-2" data-chartdata="/data/sample-year.csv" label="1 jahr" active />
        </x-segmentedButton>
    </x-slot>
</x-chart>