Bar charts and column charts

Please refer to the basic tutorial for a general introduction to creating a bar chart.

Elements of a bar/column chart

Types of bar chart and column chart

Bar charts and column charts are currently supported in the following variations in ArcadiaCharts:

Bar charts

new ac.ACBarChartBuilder(ac.BarType.HORIZONTAL)

or simply

new ac.ACBarChartBuilder()

Column charts

new ac.ACBarChartBuilder(ac.BarType.VERTICAL)

Varieties: "Clustered", "Stacked" and "Stacked 100%"

Clustered (Default)

Clustered bar-charts group (cluster) data values next to each other:

Use the following code to create a normal (clustered) bar chart:

new ac.ACBarChartBuilder()
    // ...
    .setSubtype(ac.BarSubtype.CLUSTERED)
    // ...

Stacked

Stacked bar charts stack data values above each other:

Use the following code to create a stacked bar chart:

new ac.ACBarChartBuilder()
    // ...
    .setSubtype(ac.BarSubtype.STACKED)
    // ...

Stacked 100%

Stacked 100% bar charts stack data values above each other, but always add up to 100%, i.e. the bars/columns all have the same length. This is useful for situations in which you want to show how the relative distribution of the data values changes.

Use the following code to create a 100% stacked bar-chart:

new ac.ACBarChartBuilder()
    // ...
    .setSubtype(ac.BarSubtype.STACKED_100)
    // ...

In stacked 100% charts, the Y-axis is automatically changed into a percentage axis with numbering from 0…100%.

You can also use the functions setType and setSubtype if you want to select the bar chart type at a later stage.

Comparison of ''stacked'' and ''stacked 100'' bar charts with one and two axes

In arcadiaCharts you can use one or two y-axes on your bar chart. Please keep in mind that you can lose information while using two y-axes with a stacked or stacked 100 chart:

Combining a bar/column chart with a line chart

In some situations it is advantageous to combine a bar/column chart with a line chart, for example in a climate chart:

To combine a bar chart or column chart with a line diagram in one chart:

  1. First create a bar/column chart as usual.
  2. Add (at least) two data series to it.
  3. Call the function drawValuesAsLine to indicate that you want one of the data series to be drawn as a line. Use the name of the value series that is to be drawn as a line chart as the function parameter.).

For example:

// ...

var climateData = "Month,Temperature,Precipitation\n" +
    "Jan, 4, 79\n"+
    "Feb, 4, 56\n"+
    "Mar, 7, 70\n"+
    "Apr, 10, 46\n"+
    "May, 13, 59\n"+
    "Jun, 16, 59\n"+
    "Jul, 17, 65\n"+
    "Aug, 17, 75\n"+
    "Sep, 15, 76\n"+
    "Oct, 12, 85\n"+
    "Nov, 7, 89\n"+
    "Dec, 6,84\n";
                            
new ac.ACBarChartBuilder()
    .setData(climateData)
    .addToSecondaryAxisByTitle('Precipitation')
    .drawValuesAsLine('Temperature')
    
// ...

Changing the base line of the bar chart

If your data series contain negative values, the bars corresponding to the negative values will extend downwards (or, if you are using horizontal bars, to the left):

If you wish to change this base line from which bars extend either upwards or downwards, you may do so with the command setAxisBaseLineValue(axisIdentity, baseLineValue). axisIdentity is the axis on which the base line should be moved; use ac.AxisIdentity.X_AXIS for the x axis, ac.AxisIdentity.Y_AXIS for the primary y axis and ac.AxisIdentity.Y2_AXIS for the secondary Y axis. baseLineValue signifies the numeric value from which bars extend upwards / downwards.
Example: In the previous chart, if we apply

// ...
.setAxisBaseLineValue(ac.AxisIdentity.Y_AXIS, 100000)			
// ...

the following chart results:

Note: This function will only work with clustered (normal) bar charts or column charts.

Layouting the bar chart

In general, a chart's layout is customized by using a theme XML file - for a more general discussion, see the reference manual on themes.

In this document, we are focussing on the layout settings which relate to bar and column charts. The appearance of bar and column charts are customized with the <valueBar> chartoption. Use the following theme settings:

Changing the style of the bars

You can set the following styles for all bars in the chart:

Style plain Style beveled Style glass Style 3d

by editing the following theme setting:

<valueBar>
   <style>glass</style>
</valueBar>

Changing the size of the bars and the spacings

To change the propotions of the valueBars you need to understand how calculation of valueBar width works: The main idea of an arcadiaCharts theme ist that it should be appliable regardless of the size of the chart or the number of valueSets in a chart. So its not viable to define the width of a single column in a columnchart in pixels. You may use a stacked column chart with five columns containing four values and want to try out, if a clustered column chart may represent your data better. So instead of 5 columns the chart will draw 20 columns in 5 groups. Or you have a good looking bar chart and decide to add axis titles. The titles will need some space which makes your plot area smaller. So using fixed values for the column widths could make your design easily breakable.

Changing bar width

To avoid this arcadiaCharts lets you declare which percentage of the plot area width/height should be used for drawing columns/bars regardless of the number of bars. The default value for this ratio is 0.6 (60%)

Use the following theme setting to change the size (width) of the bars:

<variable name="VALUE_BAR_SIZE_PERCENTAGE" type="size" value="0.6" />
(which means that the chart will divide 60% of the available plot area width into the desired number of value bars). or
<valueBar>
  <sizePercentage>0.6</sizePercentage>
</valueBar>

Changing spacings

The remaining plotArea width which isn´t used by valuebars will be distributed between all spacings. Spacings are gaps between bars and also the two gaps between the primary y-axis and the first bar and between the last bar and the secondary y-axis / the end of plotArea. So basically, changing “sizePercentage” also changes the widths of spacings.

If you have have a clustered bar chart there are also tiny gaps between the bars of every single cluster. These “innerSpacings” are set up to be 1/5th of the width of a regular spacing.

Use the following theme setting to change the size (width) of innerSpacings:

<variable name="VALUE_BAR_SPACING_RATIO" type="size" value="0.2" />
or
<valueBar>
  <spacingRatio>0.2</spacingRatio>
</valueBar>

You can also change startSpacing and endSpacing of the chart. This are spacings in front of the first and behind the last valueBar. The spacings calculated by the layouter will be skipped and replaced by spacings with the specified width in pixels. This will also change the base width, from which the bar widths and other spacings are calculated.

<variable name="VALUE_BAR_AXIS_SPACING_START" type="size" value="20" />
<variable name="VALUE_BAR_AXIS_SPACING_END" type="size" value="10" />
or
<valueBar>
  <axisSpacingStart>20</axisSpacingStart>
  <axisSpacingEnd>10</axisSpacingEnd>
</valueBar>

Using built-in standard themes for bar charts

ArcadiaCharts contains a number of “built-in” standard themes. The following standard themes are available for bar charts:

“Pastel shade” theme: “Glazed” theme:
.setTheme(“theme_standard_pastelshade.xml”) .setTheme(“theme_standard_glazed.xml”)
“Smoked glass” theme: “Color sphere” theme:
.setTheme(“theme_standard_smokedglass.xml”) .setTheme(“theme_standard_colorsphere.xml”)
“Velvet” theme: “Classic” theme:
.setTheme(“theme_standard_velvet.xml”) .setTheme(“theme_standard_classic.xml”)
“Business” theme: “Signet” theme:
.setTheme(“theme_standard_business.xml”) .setTheme(“theme_standard_signet.xml”)
“Minimal” theme:
.setTheme(“theme_standard_minimal.xml”)

More information can be found on the Using themes page.