Sparkline

Render a simple SVG-based single-line chart. Toggle an outline and grid with the respective outline and grid properties and chose from three semantic coloered variants via the trend property. Use utility classes to add or override styling, eg. change the line color via the text color utility.

'points', // php array
'outline' => true,
'grid' => false,
'trend' => 'neutral', // neutral | positive | negative
{{--
    $points = array(14, 12, 10, 12, 7, 6, [...] );
--}}

<x-sparkLine :$points />
{{--
    $points = array(14, 12, 10, 12, 7, 6, [...] );
--}}

<x-sparkLine class="w-[160px] h-[56px]" grid outline="false" :$points />
<x-sparkLine class="w-[160px] h-[56px]" grid outline="false" trend="positive" :$points />
<x-sparkLine class="w-[160px] h-[56px]" grid outline="false" trend="negative" :$points />
<x-sparkLine class="w-[160px] h-[56px] text-purple-600" grid outline="false" :$points />