VStackBarFlow

Stack bar for Vaadin 14 +

View larger

Close

Show a bar that presents data with rectangular bars with widths proportional to the given values.

You can set colors, background colors and descriptions (as tooltip) for each values. You can also use preset themes.

You can see the web components here: https://www.webcomponents.org/element/@jcgueriaud/v-stack-bar

Sample code

        VStackBar stackBar = new VStackBar();
        stackBar.setBars(1,2,3,5);
        add(stackBar);
        VStackBar stackBar2 = new VStackBar();
        stackBar2.setBars(10,2,3,5);
        stackBar2.setDescriptions("First description","Second description","Third description","Last description");
        stackBar2.setTheme("lumo-success");
        add(stackBar2);
        VStackBar stackBar3 = new VStackBar();
        stackBar3.setBars(2,0,3,5);
        stackBar3.setDescriptions("First description","Second description","Third description","Last description");
        stackBar3.setThemeVariant(VStackBarVariant.LUMO_ERROR);
        add(stackBar3);


        VStackBar stackBar4 = new VStackBar();
        stackBar4.setBars(2,0,3,5);
        stackBar4.setBackgroundColors("red","pink","var(--stack-background-color-2)");
        stackBar4.setColors("red","var(--stack-color-2)");
        add(stackBar4);

Links

• Online Demo
• View on GitHub

Compatibility