Chart Introduction

Easily create nice looking charts, which come in different styles.

Under the hood, Franken UI uses ApexCharts. Franken UI provides a thin layer of compatibility and serves as a glue between ApexCharts and shadcn/ui so you don’t have to configure anything by yourself.

Usage

To get started, make sure to include the Chart library script, for more details just follow the installation instructions below.

Installation via CDN

You can include the JavaScript files on your page by adding them to the <head> section.

<script
  src="https://unpkg.com/[email protected]/dist/js/chart.iife.js"
  type="module"
></script>

Installation via NPM

You can import the JavaScript from franken-ui into your app.js file.

import "franken-ui/js/chart.iife";

Once you have Chart installed, you may now use the <uk-chart> markup in your HTML code with one <script type="application/json"></script> tag as options reference.

Browse charts

Area Chart

Line Chart

Reactivity

By default, the <uk-chart> component is not reactive. This is a deliberate design choice, as using MutationObserver can be computationally expensive. As a result, changes to the referenced <script type="application/json"> tag will not trigger an update.

To enable reactivity, simply add the reactive attribute to the <uk-chart> component. This will use MutationObserver under the hood to monitor the <script> tag for changes.

<uk-chart reactive>
  <!-- ... -->
</uk-chart>

Attributes

Name	Type	Default	Description
`cls-custom`	String		Allows you to add custom CSS classes, which will be attached to the `<div>` tag.
`reactive`	Boolean	false	Enables reactivity by using `MutationObserver` to monitor the referenced `<script>` element for changes, triggering updates to the `<uk-chart>` component.

On This Page
Usage
Browse charts
Reactivity
Attributes