Directory

ColumnChart

A simple ColumnChart component for Vaadin 23+

View larger

Close

This is a simple ColumnChart component for Vaadin 23+. There are couple of styling options, which are also given by Java API.

• The chart can be uni-color (Lumo primary color) or multicolored
• Chart can have ten lines at background
• Optional min, middle, max values can be shown either on the left or right
• Column margin can be adjusted
• Data can be set by numbers or with objects defining caption and number

The browser implementation is coded in TypeScript as web-component using Lit library .

Sample code

private ColumnChart getChart() {
        ColumnChart columns = new ColumnChart();
        columns.setValues(getValues());
        columns.setWidth(350);
        columns.setHeight(600);
        columns.setAxis(ColumnChartAxis.RIGHT);
        return ColumnChart;
}

private List<ColumnChartValue> getValues() {
        List<ColumnChartValue> values = new ArrayList<ColumnChartValue>();
        // populate values, e.g.
        // ColumnChartValue value = new ColumnChartValue(5.11,"Mercedes");
        return values;
}

Links

Compatibility