Charts

79 · Charts

A chart drawn with ApexCharts. The options array is the PHP equivalent of the ApexCharts configuration; in the dark theme the axis, grid and tooltip colors adapt automatically, and the chart is repainted when the theme changes.

PRO acun:chart

Basic usage

Give the chart type with chart.type, the data with series and the axis labels with xaxis.categories. The ApexCharts toolbar is hidden by default and the chart uses the page's font.

LIVE EXAMPLE

<acun:chart :options="[
    'chart' => ['type' => 'area'],
    'series' => [['name' => 'Orders', 'data' => [2810, 2944, 3012, 2890, 3240, 3106]]],
    'xaxis' => ['categories' => ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']],
    'colors' => ['primary'],
    'stroke' => ['curve' => 'smooth', 'width' => 3],
    'fill' => ['type' => 'gradient', 'gradient' => ['opacityFrom' => 0.4, 'opacityTo' => 0.05]],
    'dataLabels' => ['enabled' => false],
]" />

Prop	Values
`options`	ApexCharts configuration
`colors`	Series colors: palette names (primary, secondary, success, danger, warning, info, dark) or color values; if omitted, the palette order

Line and bar

Other ApexCharts types such as line and bar are drawn with the same structure. Add multiple series to the series array; each series takes its color from its position in colors.

LIVE EXAMPLE

<acun:chart :height="300" :options="[
    'chart' => ['type' => 'line'],
    'series' => [['name' => 'Web', 'data' => [96, 110, 104, 120, 118, 112]], ['name' => 'Mobile', 'data' => [40, 44, 52, 49, 58, 61]]],
    'xaxis' => ['categories' => ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']],
    'colors' => ['primary', 'info'],
    'stroke' => ['width' => 3],
]" />
<acun:chart :height="300" :options="[
    'chart' => ['type' => 'bar'],
    'series' => [['name' => 'Orders', 'data' => [412, 388, 295, 176, 142]]],
    'xaxis' => ['categories' => ['Istanbul', 'Ankara', 'Izmir', 'Bursa', 'Antalya']],
    'colors' => ['primary'],
    'plotOptions' => ['bar' => ['borderRadius' => 4, 'columnWidth' => '45%']],
    'dataLabels' => ['enabled' => false],
]" />

Prop	Values
`chart.type`	area \| line \| bar \| donut \| pie \| radialBar …

Donut chart

In donut and pie charts, series is a flat array of numbers and the slice names are given with labels. Use #e5e7eb for the remaining or empty slice: in the dark theme this color is automatically turned into dark gray (#474747).

LIVE EXAMPLE

<acun:chart :height="300" :options="[
    'chart' => ['type' => 'donut'],
    'series' => [3106, 214, 96],
    'labels' => ['Delivered', 'In transit', 'Returned'],
    'colors' => ['success', 'warning', 'danger'],
    'legend' => ['position' => 'bottom'],
]" />
<acun:chart :height="300" :options="[
    'chart' => ['type' => 'donut'],
    'series' => [74, 26],
    'labels' => ['Completed', 'Remaining'],
    'colors' => ['primary', '#e5e7eb'],
    'legend' => ['position' => 'bottom'],
    'dataLabels' => ['enabled' => false],
]" />

Prop	Values
`series`	Array of numbers
`labels`	Slice names
`#e5e7eb`	Becomes #474747 in the dark theme

Height

Give the height in pixels with height; the default is 280. Until the chart is drawn, the container reserves this height so the page does not shift. For small charts in cards, hide the axes with the ApexCharts sparkline option.

LIVE EXAMPLE

<acun:card>
    <p class="text-sm text-gray-500 dark:text-zinc-400">Weekly orders</p>
    <p class="text-2xl font-semibold text-gray-900 dark:text-zinc-100">742</p>
    <acun:chart :height="80" :options="[
        'chart' => ['type' => 'area', 'sparkline' => ['enabled' => true]],
        'series' => [['name' => 'Orders', 'data' => [96, 104, 99, 118, 112, 107, 106]]],
        'colors' => ['success'],
        'stroke' => ['curve' => 'smooth', 'width' => 2],
    ]" />
</acun:card>

Prop	Values
`height`	Pixels (default 280)

Installation

ApexCharts is not included in the package; install it in your application and register it with registerChart through the PRO JS entry @acunsoft/acun-ui-pro (the Vite alias from the CSS, JavaScript and build guide). Because the chart is drawn inside wire:ignore, it is not recreated on Livewire updates.

import ApexCharts from 'apexcharts';
import { registerChart } from '@acunsoft/acun-ui-pro';

document.addEventListener('livewire:init', () => registerChart(Alpine, ApexCharts));

API

Props and slots

The values the component accepts.

Prop	Default	Description
`options`	`[]`	ApexCharts configuration (chart, series, xaxis, colors…)
`height`	`280`	Chart height (pixels); the placeholder also opens at this height
`options.chart.toolbar.show`	`false`	ApexCharts toolbar; shown with true
`options.chart.fontFamily`	`inherit`	Uses the page's font