Directory

← Back

ColumnChart

A simple ColumnChart component for Vaadin 23+

Author

Rating

Popularity

<100

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;
}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Version 1.1.0

  • Added possibility to remove the axises
  • Fixed issue with Vite builds
Released
2022-08-27
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 23+
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Microsoft Edge

ColumnChart - Vaadin Add-on Directory

A simple ColumnChart component for Vaadin 23+ ColumnChart - Vaadin Add-on Directory
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 .
Online