Still have questions?
Contact support
You are looking at an outdated 7.11.1 version of this document. Switch to the 7.14.0 version to see the up to date information.

Bar Chart

Overview

A bar chart is a chart with rectangular bars of lengths usually proportional to the magnitudes or frequencies of what they represent. Although the bars can be horizontally or vertically oriented, we call vertically oriented charts as Column charts and study them in a Column Chart section.


Bar charts are useful for showing data changes over a period of time or for illustrating comparisons among items. In bar charts, categories are typically organized along the vertical axis and values along the horizontal axis.


Think of using a bar chart when:

  • The axis labels are long.
  • The values that are shown are durations.

Chart

Depending on the data model and visualization purpose the bar chart may be single- or multi-series. Moreover, you can enable 3D mode for bar chart.

Single Series

Let's see single series bar chart created using the following data - sales of ACME Corp. made through different retail channels in one year:

Retail ChannelSales
Department Stores$637.166
Discount Stores $721.630
Men's/Women's Specialty Stores $148.662
Juvenile Specialty Stores $78.662
All other outlets $90.000

Now we need to convert this data. In terms of AnyChart we have one series of data (Sales) with categories that hold Retail channels' names. Each bar in series represents sales amount made through the channel this bar belongs with. Converted data looks like this:

  var data = anychart.data.set([
    ["Department Stores", 637166],
    ["Discount Stores", 721630],
    ["Men's/Women's Specialty Stores", 148662],
    ["All other outlets", 90000]
  ]);
  var chart = anychart.bar();
  chart.bar(data);

As you can see, we've used .bar() method, set channel's names into first column to define bar category and values of sales' amount into second column.

JsFiddle Playground

Multi-series

To compare two or more data rows it's better to use multi-series bar charts as it is shown in the sample below.

Let's compare year 2003 sales to year 2004 sales:

Retail ChannelYear 2003 SalesYear 2004 Sales
Department Stores$637.166$737.166
Discount Stores $721.630$537.166
Men's/Women's Specialty Stores $148.662$188.662
Juvenile Specialty Stores $78.662$178.662
All other outlets $90.000$89.000

As we do in single-series bar sample above we need to convert this data, the only difference between these two samples is the fact that now we have two series of data - one series for each year, so we give proper names to each series:

  // data
  var data = anychart.data.set([
    ["Department Stores", 637166, 737166],
    ["Discount Stores", 721630, 537166],
    ["Men's/Women's Specialty Stores", 148662, 188662],
    ["Juvenile Specialty Stores", 78662, 178662],
    ["All other outlets", 90000, 89000]
  ]);
  // map data for further using
  var Sales2003 = data.mapAs({x: [0], value: [1]});
  var Sales2004 = data.mapAs({x: [0], value: [2]});
  // define chart type
  var chart = anychart.bar();
  // set data
  chart.bar(Sales2003);
  chart.bar(Sales2004);

JsFiddle Playground

3D Series

You can easily display one or multiple series of bars in 3D mode. Use .bar3d() method to enable bar 3D mode. If you have a single series of data you can use it as a parameter for the .bar3d() method and it will work pretty fine. For creating multiple 3D series you need to invoke .bar() method for each of the series with your data as a parameter for these series.

// data
var data = anychart.data.set([
  ["Department Stores", 637166, 737166],
  ["Discount Stores", 721630, 537166],
  ["Men's/Women's Specialty Stores", 148662, 188662],
  ["Juvenile Specialty Stores", 78662, 178662],
  ["All other outlets", 90000, 89000]
]);

// map data for further using
var Sales2003 = data.mapAs({x: [0], value: [1]});
var Sales2004 = data.mapAs({x: [0], value: [2]});

// define chart type
var chart = anychart.bar3d();

// set data
chart.bar(Sales2003);
chart.bar(Sales2004);

More information about 3D charts can be found in 3D Charts article.

JsFiddle Playground

Axes

In AnyChart axis is an object that allows you to configure chart grid, axis line along with tick marks and labels, axis scale and settings and else. In this section we will quickly demonstrate how we can adjust axis orientation, invert axis scale and control minimum and maximum values.

Orientation

With AnyChart Javascript Framework you can place axes to any side of the chart, all you need to do is to adjust orientation with .orientation() parameter of .yAxis() or .xAxis() methods.


Position depends on plot type and inversion of axes, you will find the list of all possible orientation and inversion settings in Axes Orientation templates.

  var xAxis = chart.xAxis();
  xAxis.orientation("right");
  var yAxis = chart.yAxis();
  yAxis.orientation("top");

And here is the demonstration of this feature in the Single-series sample:

JsFiddle Playground

Inversion

AnyChart allows to invert any axis: Y, X or any extra. Inversion is controlled by axis scale().inverted():

  var yScale = chart.yScale();
  yScale.inverted(true);

JsFiddle Playground

Minimum and Maximum

AnyChart javascript charting library calculates axis minimum and maximum values automatically. You can see this on the scale inversion chart sample above: the minimal value of the Y-Axis is 0, and the maximum is 800. You can control these values using .maximum() and .minimum() methods:

  var yScale = chart.yScale();
  yScale.minimum(-200000);
  yScale.maximum(800000)

And here is the demonstration of maximum and minimum values in the Single-series sample:

JsFiddle Playground

Padding

The special thing about bar charts is the padding between a bar and a group of bars (in multi-series charts). If you want to set paddings you need to use xPointPosition(). Paddings are measured as a ratio to bar width (bars widths are calculated automatically). For example, if you set xPointPosition(0.5) - the space between two bars will be equal to the half of each bar width. If you want to have no padding between bars set xPointPosition(0).

Here is a sample of multi-series bar chart with xPointPosition set to 0.5.

JsFiddle Playground

Visualization

In this section we will describe the main elements of a bar chart style and demonstrate how a style can be applied.

The main idea of styles is to segregate visualization and data definition. Visual appearance of bars is defined using certain styles and then you just apply the style to the certain data elements. The style can be applied to a data series or a single bar.

Also, styles are used to make charts interactive, you can define how elements will be displayed by default, when hovered, etc.

Basic Sample

Now, let's look how to apply a simple style to the chart. As we've already said, a style consists of several elements, here is the javascript structure:

  var series = chart.bar(data);
  series.fill("Gold");
  series.hoverStroke("darkred", 4);
  series.stroke("#56561a", 4);
  series.hatchFill("diagonalbrick", "gray");
  series.hoverHatchFill("diagonalbrick", "darkred");

Using such settings we've created a style that colors bars in Gold, makes the border rather thick, fills hatch with DiagonalBrick and a couple of effects. Also, we've defined that when the element is hovered it will be highlighted with the dark red thick border and hatch fill colored dark red too.

Now let's apply these setting to the sample shown above.

JsFiddle Playground

Labels and Tooltips

In this section we will explain how to add and configure data labels and tooltips.

If you want to configure data labels and tooltips for all series - you should use .labels() and .tooltip() methods. Adding attributes with values to these methods, you can change visual appearance, position and format of the same-named elements.

With the following example let's make data labels appear to the right from the bars, format them to show only the value corresponding to the bar and force tooltips to show detailed description.

When formatting data labels' text we use .textFormatter to choose the column we need to get information from.

JsFiddle Playground
  • Related Help Topics:

Learn more about labels and tooltips in Labels and tooltips Full Keywords reference and formatting guide: Labels and tooltips –>

Markers

Marker is an object with a specified shape, size, and color or an image used to mark and to identify chart elements. AnyChart allows to add markers to any data element including bars.

In the sample below we take single-series data described above and mark the biggest bar in series with a "Star5" of the "Gold" color.

To make the marker more visually appealing we set its size to 12px.

  {
    x: "Men's/Women's Specialty Stores",
    value: 148662, 
    marker:{
      // set marker type
      type:'star5',
      // set marker color
      fill:"gold",
      // set marker size
      size: 12,
      // enable marker
      enabled: true
    }, 
    // set marker size on mouse over
    hoverMarker: {size: 22}
  }

And here is a result - the best retail channel for ACME Corp. is Discount Stores and can be easily seen on this chart.

JsFiddle Playground

Colors

AnyChart uses default color palette to colorize data elements of chart automatically if you have not defined special colors.

Colorizing Elements

Now let's study how to apply different colors to different data series. To apply the color to the exact series we need to set the .fill() parameter in the series. In the sample below we have 5 series with sample data and we'll color each series to different color. Here is the sample:

JsFiddle Playground

Look at the individual points we colorized in the sample below. We've got a chart with one series and predefined color for all elements. We set "Rgb(180,77,77)" color for the minimum point and "Rgb(77,180,77)" for the maximum one. As you see it is very easy to do by setting a value for the fill() parameter of a point.

JsFiddle Playground

Important Note:

AnyChart HTML5 charting library takes care of visualization and users convenience seriously - that is why we have a number of ways to set colors. For example, instead of "RGB(240,248,255)" you can set "AliceBlue" or "#F0F8FF"- and the color will be the same. Depending on your system/site/application design you may need - and use - any of this color setting methods. But even this is not everything about colors in AnyChart: read more about setting colors below and in the following Help Sections:

Hatch Fills

AnyChart technology allows printing charts out. Some printers may render colors differently from the image we see on monitors, so it may be hard to distinguish charts colored differently on monitors and similarly on prints. Also it is impossible to identify colors on prints of monochrome printers. AnyChart has a very useful feature - hatch fills, ideal for differentiating elements on black and white display or for those who are color blind. Hatch fill is fully-independent structure, it doesn't rely on color fill and has its own settings.


You can find more information about hatch types in Hatch Fill tutorial.

To demonstrate hatch fill feature we've prepared the following sample. As you see it is completely monochrome. We have chart a with 5 series with 3 data points in each. For every series we've applied different hatch fills by setting hatch type for the .hatchFill() parameter.

JsFiddle Playground

Samples

You can see a lot of other samples in AnyChart Web Bar Charts Gallery.