KavaChart in Action - Examples and Documentation - AlaCarte

[ Back ] Basic Applet Collection - Bar & Column Charts

Bar charts are ideal for comparing categories or discrete events against a common scale. In KavaChart, bar charts with vertical bars are called "column" charts, while those with horizontal bars are called "bar" charts.

Bar charts are particularly good at highlighting the differences between items. If you need to show trends, a line chart or area chart variant might be a better choice.

The KavaChart AlaCarte Basic applet collection includes these bar chart applet classes:

  • com.ve.kavachart.applet.barApp
  • com.ve.kavachart.applet.columnApp
  • com.ve.kavachart.applet.stackBarApp
  • com.ve.kavachart.applet.stackColumnApp

Use the source code to this page as a guide in creating your own bar charts. You can also use the KavaChart ChartWizard to design your own bar charts.

This applet definiton illustrates at a glance what the makeup of a youth swim team looks like for several years. In addition to comparing the total size of the team, the chart illustrates the team composition by gender.

A chart like this is a "stacked bar" chart, because the dataset values are stacked, and the bars are horizontal. The applet name is "stackBarApp".

Placing your mouse over a bar in the chart will show what the actual data values are for that item. The format of the numbers is defined using applet parameters.

An image background makes the chart more interesting. Images can be used for any filled chart object: backgrounds, plotareas, even bars.


In this sample, we use a baseline value of 0 (the default) to show bars ascending and descending from an expected value. This gives us a side-by-side comparison of 3 different series in 4 different months, and tells us at a glance what the status is for a particular production line.

Y Axis Percentage labels automatically describe the values in a way appropriate for the applet viewer. Dwell labels give exact values for each bar.

Bar baselines can be set at any value. This chart uses "columnApp", vertical bars that are grouped instead of stacked.


Sometimes the simplest chart is best. This bar chart uses "columnApp" with the parameter "individualColors" set to "true". Individual colors make comparisons among bars of a single dataset stand out.

For even more simplicity, we removed the Y axis except for the grid lines, and added a reference line at the goal level. This gives an additional level of information - at a glance you can tell which stores exceeded the sales goal.

Any bar or column chart can have individual colors and any axis can have reference lines.

Since there's not enough room for the labels, the axis automatically staggers them to prevent overlap.


Bar/column charts can also be used for scientific work. If you organize your raw data into a histogram, a "columnApp" will display the histogram values correctly. Similarly, a Pareto chart can be created by sorting raw data.

If you're in a JSP environment, you can combine KavaChart's column chart applets or server objects with KavaChart ProServe chart tags to automatically generate histogram or pareto analysis data.

You can also add "error bars" to any bar chart by adding Y values to the chart. Here's an example:


Although the simplest bar charts are usually the best, KavaChart supports some visually interesting features, like semi-transparent colors and layered bars. Be careful, though. These visual effects can obscure the data in many cases.

Transparent colors are defined using ARGB hexadecimal numbers. The first two digits, ranging from 00 to ff, define the alpha component, or opacity, where ff is fully opaque and 00 is completely transparent. The other digits are conventional RGB, such as you might use for the HTML in a web page.