UI5 Charts

npm install @drbackmischung/charts-ui5

Import

import '@drbackmischung/charts-ui5/main.js';

Example

<ui5-chart labels="2018,2019,2020,2021,2022" show-legend y-min="0" y-max="10">
    <ui5-chart-dataset label="Dataset A" fill>
        <ui5-chart-item value="4.2"></ui5-chart-item>
        <ui5-chart-item value="3.3"></ui5-chart-item>
        <ui5-chart-item value="0.6"></ui5-chart-item>
        <ui5-chart-item value="4.2"></ui5-chart-item>
        <ui5-chart-item value="5.9"></ui5-chart-item>
    </ui5-chart-dataset>
    <ui5-chart-dataset label="Dataset B" fill>
        <ui5-chart-item value="1.4"></ui5-chart-item>
        <ui5-chart-item value="6.7"></ui5-chart-item>
        <ui5-chart-item value="5.2"></ui5-chart-item>
        <ui5-chart-item value="7.8"></ui5-chart-item>
        <ui5-chart-item value="5.2"></ui5-chart-item>
    </ui5-chart-dataset>
    <ui5-chart-dataset label="Dataset C" fill>
        <ui5-chart-item value="1"></ui5-chart-item>
        <ui5-chart-item value="2"></ui5-chart-item>
        <ui5-chart-item value="4"></ui5-chart-item>
        <ui5-chart-item value="5.6"></ui5-chart-item>
        <ui5-chart-item value="8.2"></ui5-chart-item>
    </ui5-chart-dataset>
</ui5-chart>