Easily create nice looking charts, which come in different styles.
Under the hood, FrankenstyleKit uses ApexCharts.
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 frankenstyle into your
app.js file.
To include the necessary CSS:
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 <script data-fn="config" type="application/json" data-reactive> tag. 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 | String | Allows you to add custom CSS classes, which will be attached to the <div> tag. | |
loading | Boolean | false | Displays a loading state before the chart is rendered. Useful when chart data is being fetched asynchronously. |
width | String | "100%" | Sets the width of the chart container. Accepts a pixel value or any valid CSS unit (e.g. "500px", "100%"). |
height | String | "auto" | Sets the height of the chart container. Accepts a pixel value or any valid CSS unit (e.g. "400px", "50vh"). |