Light Dark System

Simple Chart

<zn-simple-chart> | ZnSimpleChart
Since 1.0 experimental

A simple, pre-styled bar chart.

zn-simple-chart renders a small, opinionated bar chart with no axes or legend — handy for inline sparklines and dashboard summary tiles. It accepts a single series of values via datasets and optional x-axis labels via labels. If neither is provided, a placeholder dataset is shown. 

<zn-simple-chart>
</zn-simple-chart>

Examples

With Your Own Data

Pass a datasets array with one entry and its data values, plus a matching labels array for tooltip context. 

<zn-simple-chart
  datasets="[{&quot;data&quot;:[12,18,9,24,30,22,35,42]}]"
  labels="[&quot;Mon&quot;,&quot;Tue&quot;,&quot;Wed&quot;,&quot;Thu&quot;,&quot;Fri&quot;,&quot;Sat&quot;,&quot;Sun&quot;,&quot;Mon&quot;]">
</zn-simple-chart>

Enable Animations

By default, bars render immediately with no animation. Add the enable-animations attribute to make bars grow from the baseline on first render. Pass a number (milliseconds) to control the duration; bare enable-animations defaults to 1500. 

<zn-simple-chart
  enable-animations="3000"
  datasets="[{&quot;data&quot;:[12,18,9,24,30,22,35,42]}]"
  labels="[&quot;Mon&quot;,&quot;Tue&quot;,&quot;Wed&quot;,&quot;Thu&quot;,&quot;Fri&quot;,&quot;Sat&quot;,&quot;Sun&quot;,&quot;Mon&quot;]">
</zn-simple-chart>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.116/dist/components/simple-chart/simple-chart.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.116/dist/components/simple-chart/simple-chart.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/simple-chart/simple-chart.js';