• What is a column chart?
• Data Format
• How to Make a Column Chart?
• Basic Column Chart
• Adding markers
• Stacked Column Charts
  • Normal Stacked Column Charts
  • 100% Stacked Column Charts
• Changing the border-radius
• Distributed Chart
• Reversed Chart
• When to Use a Column Chart?

Column Chart

What is a column chart? #

A Column Chart is a vertical graphical representation of different data categories. It visualizes measured values in rectangular columns or bars plotted along two axes. In general, Column Graphs and Charts are generally used for displaying statistical comparisons between categories of data over time.

In this Column Chart guide, we will go through the configuration and options to plot different kinds of column graphs.

Data Format #

The data format for a column chart is the same as for the other XY charts. You need to provide your data in table format

How to Make a Column Chart? #

There are several types of column charts you can create – basic column chart, stacked column chart, distributed chart, and reversed chart.

Basic Column Chart #

To create a basic bar chart, use the ColumnChart class:

\koolreport\apexcharts\ColumnChart::create(array(  

Adding markers #

Markers on a column chart are useful for comparisons or they can be helpful in providing additional information related to the particular data-point.

Note: Markers don’t work with stacked charts

\koolreport\apexcharts\ColumnrChart::create(array(
    "columns" => array(
        'year',
        'Actual',
        'Expected' => [
            'marker' => [
                'strokeWidth' => 5,
                'strokeColor' => '#775DD0'
            ]
        ],
    ),

Stacked Column Charts #

There are 2 variants of stacked column charts.

Normal Stacked Column Charts #

The columns are stacked on top of each other based on their values.

\koolreport\apexcharts\ColumnrChart::create(array(
    "stacked" => true   

100% Stacked Column Charts #

The columns are stacked on top of each other based on their percentage or weightage among the groups.

\koolreport\apexcharts\ColumnrChart::create(array(
    "stacked" => true,
    "stackType" => "100%"

(/javascript-chart-demos/column-charts/stacked-column-100/)

Changing the border-radius #

You can control the border radius of a column chart by setting the following configuration.

\koolreport\apexcharts\ColumnrChart::create(array(
    "options" => [
        "plotOptions" => [
            "bar" => [
                "borderRadius" => 10
            ]
        ]
    ]

Distributed Chart #

A distributed column chart means all the columns in the chart will have different colors.

\koolreport\apexcharts\ColumnrChart::create(array(
    "options" => [
        "plotOptions" => [
            "bar" => [
                "distributed" => true
            ]
        ]
    ]

Reversed Chart #

A reversed column chart is a mirrored chart that goes from top to bottom instead of top to bottom. The following configuration of the y-axis will make an up-side-down graph.

\koolreport\apexcharts\ColumnrChart::create(array(
    "options" => [
        'yaxis' => [
            'reversed' => true
        ]    

When to Use a Column Chart? #

There are several common use cases for column charts and graphs. For example, they are extremely useful when you want to:

• Compare data from several related categories.
• Understand how variables change over time.
• Evaluate performance against target-line data.
• Compare business data such as performance from various departments and teams or sales of different product categories for a given period of time.
• To draw and compare business statistics and financial data.