Laravel Chart Mixed Component

Pro

Bars and a line on the same axes, with the finding written out.

A Chart Mixed built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are contrast-tested against WCAG 2.1 AA/UI in CI, in both themes — see what's covered. Drop it in with a single Blade tag: <x-aura::chart-mixed>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

The Chart Mixed is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →

Usage

<x-aura::chart-mixed
    :labels="[\"Jan\", \"Feb\", \"Mar\"]"
    :datasets="[
        [\"label\" => \"Orders\", \"data\" => [120, 148, 131], \"type\" => \"bar\"],
        [\"label\" => \"Average value\", \"data\" => [41, 44, 52], \"type\" => \"line\"],
    ]"
    summary="Orders were flat while the average order value rose 27%."
/>

See the full API, props and live examples in the Chart Mixed documentation.

Overview

<x-aura::chart-mixed> draws volume as bars with a trend over it.

Props

Prop	Type	Default	Description
`labels`	`array`	`[]`	The x axis.
`datasets`	`array`	`[]`	Each with `label`, `data` and `type` of `bar` or `line`.
`height`	`string`	`'320px'`	Sanitised.
`legend`	`bool`	`true`	Show the legend.
`stacked`	`bool`	`false`	Stack the bars.
`title`	`string\|null`	`null`	Rendered as a `<figcaption>`.
`summary`	`string\|null`	`null`	The finding. See below.