Overview #

A column chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.


    "title"=>"Sale Report",

In above example, we use datastore category_amount as the dataSource for ColumnChart. We set the title for the chart to "Sale Amount On Each Category". We specify columns from datastore to be used for drawing chart. The first column category will be acted as label for xAxis while amount will be value for yAxis. We add extra settings for amount columns to make dollar sign appear in front of number.

We may add more data column to columns, for each added columns, new chart series will be added.

Settings #

nameSpecify name of chart, it is optional
dataSource*required Specify the source for chart, accept DataStore, DataSource, Process and even array data in table or associate format.
columnsarray/mixedSpecify the list of columns will be used to draw chart
optionsarraySpecify extra options for charts, see extra options section for more details.
titlestringTitle of the charts
backgroundOpacitynumber0.5Specify opacity of bar background
stackedbooleanfalseSpecify if the series of chart will be stacked.

Data column settings #

labelstringSet label for column
typestringType of columns number,string,datetime
prefixstringSet prefix for value, for example $
suffixstringSet suffix for value
formatValuestring/functionAccept string or function. For eaxmple: "formatValue"=>"@value USD" or "formatValue"=>function($value){return $value." USD";}
decimalsnumberThe number of number after decimal points
thousandSeparatorstring,Specify how thousand is seperated
decimalPointstring.Specify decimal point
configarrayContain special settings of chart js config for series, see below ChartJs configuration for column for more details

ChartJs config for column #

borderColorstring/arrayThe color of the bar border. We may specify an array of colors if we want different color for each bar in the series
backgroundColorstring/arrayThe fill color of the bar. We may input an array of colors if we want different color for each bar in the series
borderWidthnumber/arrayThe stroke width of the bar in pixels.
borderSkippedstringWhich edge to skip drawing the border for. bottom, top, left, right
hoverBackgroundColorstring/arrayThe fill colour of the bars when hovered.
hoverBorderColorstring/arrayThe stroke colour of the bars when hovered.
hoverBorderWidthstring/arrayThe stroke width of the bars when hovered.
xAxisIDstringThe ID of the x axis to plot this dataset on. If not specified, this defaults to the ID of the first found x axis
yAxisIDstringThe ID of the y axis to plot this dataset on. If not specified, this defaults to the ID of the first found y axis.

Example for column settings:

    "title"=>"Sale Amount On Each Category"

Some extra options #

Below are some extra options for ColumnChart. This below settings are put under options property.

barPercentagenumber0.9Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other.
categoryPercentagenumber0.8Percent (0-1) of the available width each category should be within the sample width.
barThicknessnumberManually set width of each bar in pixels. If not set, the base sample widths are calculated automatically so that they take the full available widths without overlap. Then, the bars are sized using barPercentage and categoryPercentage.
maxBarThicknessSet this to ensure that bars are not sized thicker than this.

Stacked chart #

ColumnChart support stacked chart