Bar Chart

Bar Chart

Bar charts are used to visualize quantitative data. Since bar charts differentiate by length, we recommend that in most cases they be used rather than donut or pie charts, which differentiate by angle and area. As a rule of thumb, bar charts are a great way to show and compare categorical data. If you want to show continuous data over time, you may consider using a Line Chart instead. If you wish to show the percentage utilization ratio between used and available, you should check out the Utilization Bar Chart pattern.

#vertical-bar-chart #horizontal-bar-chart

Bar Chart

#vertical-bar-chart-callout-1

  1. Horizontal Axis Labels:
    • Horizontal axis labels display the series names and are recommended, but can be omitted if necessary due to space constraints and responsiveness. If omitted a legend must be available.
  2. Vertical Axis Labels: Vertical axis labels display values.
  3. Axis Tick Marks (optional): There can be both major and minor tick marks on the vertical axis of vertical charts. Tick marks are not needed on the horizontal axis of vertical charts since the horizontal axis of a vertical bar chart is not a quantitative scale line.
  4. Grid Lines (optional): Horizontal grid lines are suggested for vertical charts, but should not be used with horizontal bar charts.
  5. Bar:
    • Interaction:
      • If drill down behavior is supported, clicking on a bar will navigate to the appropriate page.
      • If supported, right clicking on an bar will bring up a menu with associated actions. If you are using a grouped bar chart, right clicking on a group will bring up a menu with associated actions for that group.
    • Width: All bars should be the same width.
    • Color: For recommendations on fill colors, see the Color Palette.
    • Height: Bar height in vertical charts is the dimension that represents its value.
    • Spacing: Spacing between bars should be equal. In the case of grouped charts, increase the spacing between main categories.
  6. Tooltip: We recommend that the series name and value are displayed on hover.
  7. Legend: It is recommended to include a legend to define the colors on the chart. On the bar chart, the legend may be located left aligned and underneath the chart or left aligned and to the right of the chart.
    • Interactive Legend (optional): Clicking on a series in the legend should toggle the visibility of the series in the chart.
  8. Stacked Bar (optional): The first series name is represented by the topmost stacked bar, and the last series name is represented by the bottommost stacked bar. This order should not be reversed.

#horizontal-bar-chart-callout-1

  1. Horizontal Axis Labels: Horizontal axis labels display values.
  2. Vertical Axis Labels: Vertical axis labels display the series names and are recommended, but can be omitted if necessary due to space constraints and responsiveness. If omitted a legend must be available.
  3. Axis Tick Marks (optional): There can be both major and minor tick marks on the horizontal axis of horizontal bar charts. Tick marks are not needed on the vertical axis of horizontal charts since the vertical axis of a horizontal bar chart is not a quantitative scale line.
  4. Grid Lines (optional): Vertical grid lines are suggested for horizontal charts, but should not be used with vertical charts.
  5. Bar
    • Interaction:
      • If drill down behavior is supported, clicking on a bar will navigate to the appropriate page.
      • If supported, right clicking on an bar will bring up a menu with associated actions. If you are using a grouped bar chart, right clicking on a group will bring up a menu with associated actions for that group.
    • Width: All bars should be the same width.
    • Color: For recommendations on fill colors, see the Color Palette.
    • Length: Bar length in horizontal charts is the dimension that represents its value.
    • Spacing: Spacing between bars should be equal. In the case of grouped charts, increase the spacing between main categories.
  6. Tooltip: We recommend that the series name and value are displayed on hover.
  7. Legend: It is recommended to include a legend to define the colors on the chart. On the bar chart, the legend may be located left aligned and underneath the chart or left aligned and to the right of the chart.
    • Interactive Legend (optional): Clicking on a series in the legend should toggle the visibility of the series in the chart.
  8. Stacked Bar (optional): The first series name is represented by the leftmost stacked bar, and the last series name is represented by the rightmost stacked bar. This order should not be reversed.

PatternFly Core Example


Jump to Vertical Bar Chart, Grouped Vertical Bar Chart, Horizontal Bar Chart or Grouped Horizontal Bar Chart

Vertical Bar Chart

Reference Markup

<script src="components/c3/c3.min.js"></script>
<script src="components/d3/d3.min.js"></script>
<div id="donut-chart-5"></div>
<script>
  var c3ChartDefaults = $().c3ChartDefaults();

  var chartUrls = [
    'https://www.gogole.com',
    'https://www.yahoo.com',
    'https://www.bing.com/',
    'https://duckduckgo.com/'
  ];
  var categories = ['Q1', 'Q2', 'Q3', 'Q4'];
  var columnsData = [
    ['data1', 400, 360, 320, 175]
  ];

  var verticalBarChartConfig = $().c3ChartDefaults().getDefaultBarConfig(categories);
  verticalBarChartConfig.bindto = '#donut-chart-5';
  verticalBarChartConfig.axis = {
    x: {
      categories: categories,
      type: 'category'
    }
  };
  verticalBarChartConfig.data = {
    type: 'bar',
    columns: columnsData,
    // optional drilldown behavior
    onclick: function (d, element) {
      window.location = chartUrls[d.index];
    }
  };
  var verticalBarChart = c3.generate(verticalBarChartConfig);
</script>

Grouped Vertical Bar Chart

Reference Markup

<script src="components/c3/c3.min.js"></script>
<script src="components/d3/d3.min.js"></script>
<div id="bar-chart-6"></div>
<script>
  var c3ChartDefaults = $().c3ChartDefaults();

  var chartUrls = [
    'https://www.gogole.com',
    'https://www.yahoo.com',
    'https://www.bing.com/',
    'https://duckduckgo.com/'
  ];
  var categories = ['Q1', 'Q2', 'Q3', 'Q4'];
  var columnsData = [
    ['data1', 400, 360, 320, 175]
  ];

  var groupedcCategories = ['2013', '2014', '2015'];
  var groupedColumnsData = [
    ['Q1', 400, 250, 375],
    ['Q2', 355, 305, 300],
    ['Q3', 315, 340, 276],
    ['Q4', 180, 390, 190]
  ];
  var groupedColors = {
    pattern: [
      $.pfPaletteColors.red,
      $.pfPaletteColors.blue,
      $.pfPaletteColors.orange,
      $.pfPaletteColors.green
    ]
  };

  var groupedVerticalBarChartConfig = $().c3ChartDefaults().getDefaultGroupedBarConfig();
  groupedVerticalBarChartConfig.bindto = '#bar-chart-6';
  groupedVerticalBarChartConfig.axis = {
    x: {
      categories: groupedcCategories,
      type: 'category'
    }
  };
  groupedVerticalBarChartConfig.data = {
    type: 'bar',
    columns: groupedColumnsData,
    // optional drilldown behavior
    onclick: function (d, element) {
      window.location = chartUrls[d.index];
    }
  };
  groupedVerticalBarChartConfig.color = groupedColors;
  var groupedVerticalBarChart = c3.generate(groupedVerticalBarChartConfig);
</script>

Horizontal Bar Chart

Reference Markup

<script src="components/c3/c3.min.js"></script>
<script src="components/d3/d3.min.js"></script>
<div id="bar-chart-8"></div>
<script>
  var c3ChartDefaults = $().c3ChartDefaults();

  var chartUrls = [
    'https://www.gogole.com',
    'https://www.yahoo.com',
    'https://www.bing.com/',
    'https://duckduckgo.com/'
  ];
  var categories = ['Q1', 'Q2', 'Q3', 'Q4'];
  var columnsData = [
    ['data1', 400, 360, 320, 175]
  ];

  var horizontalBarChartConfig = $().c3ChartDefaults().getDefaultBarConfig(categories);
  horizontalBarChartConfig.bindto = '#bar-chart-8';
  horizontalBarChartConfig.axis = {
    rotated: true,
    x: {
      categories: categories,
      type: 'category'
    }
  };
  horizontalBarChartConfig.data = {
    type: 'bar',
    columns: columnsData,
    // optional drilldown behavior
    onclick: function (d, element) {
      window.location = chartUrls[d.index];
    }
  };
  var horizontalBarChart = c3.generate(horizontalBarChartConfig);
</script>

Grouped Horizontal Bar Chart

Reference Markup

<script src="components/c3/c3.min.js"></script>
<script src="components/d3/d3.min.js"></script>
<div id="bar-chart-8"></div>
<script>
  var c3ChartDefaults = $().c3ChartDefaults();

  var chartUrls = [
    'https://www.gogole.com',
    'https://www.yahoo.com',
    'https://www.bing.com/',
    'https://duckduckgo.com/'
  ];
  var categories = ['Q1', 'Q2', 'Q3', 'Q4'];
  var columnsData = [
    ['data1', 400, 360, 320, 175]
  ];

  var groupedcCategories = ['2013', '2014', '2015'];
  var groupedColumnsData = [
    ['Q1', 400, 250, 375],
    ['Q2', 355, 305, 300],
    ['Q3', 315, 340, 276],
    ['Q4', 180, 390, 190]
  ];
  var groupedColors = {
    pattern: [
      $.pfPaletteColors.red,
      $.pfPaletteColors.blue,
      $.pfPaletteColors.orange,
      $.pfPaletteColors.green
    ]
  };

  var groupedHorizontalBarChartConfig = $().c3ChartDefaults().getDefaultGroupedBarConfig();
  groupedHorizontalBarChartConfig.bindto = '#bar-chart-8';
  groupedHorizontalBarChartConfig.axis = {
    rotated: true,
    x: {
      categories: groupedcCategories,
      type: 'category'
    }
  };
  groupedHorizontalBarChartConfig.data = {
    type: 'bar',
    columns: groupedColumnsData,
    // optional drilldown behavior
    onclick: function (d, element) {
      window.location = chartUrls[d.index];
    }
  };
  groupedHorizontalBarChartConfig.color = groupedColors;
  var groupedHorizontalBarChart = c3.generate(groupedHorizontalBarChartConfig);
</script>