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.
To include the Chart library via CDN, add the following to your HTML <head>:
If you're building a modern app with a bundler, you can import the
JavaScript file from franken-ui into your
app.js file.
To include the necessary CSS, add the extension to your vite.config.js file.
Once everything is configured, you may now use the <uk-chart> markup in your HTML code with one <script type="application/json"></script> tag as options reference.
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.
| Name | Type | Default | Description |
|---|---|---|---|
force-prevent-rerender | Boolean | false | Forcefully prevents component rerendering. |
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. |