Overview #

A bar chart provides a way of showing data values represented as horizontal 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 BarChart. 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.
axesarrayDefined multiple axes for your chart

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 example: "formatValue"=>"@value USD" or "formatValue"=>function($value){return $value." USD";}
decimalsnumberThe number of number after decimal points
thousandSeparatorstring,Specify how thousand is separated
decimalPointstring.Specify decimal point
configarrayContain special settings of chart js config for series, see below ChartJs configuration for column for more details
chartTypestringSpecify which type of chart a column/series should be drawn as
axisstringSpecify which axis a column/series is measured against

Since version 3.0.0, you can set Chartjs' dataset config directly in column settings instead of in column's config:

        "columns" => array(
            "column_1" => array(
                "borderColor" => "blue", // set borderColor directly for column_1 instead of column_1's config

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 BarChart. 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 #

BarChart support stacked chart



Get started with KoolReport

KoolReport will help you to construct good php data report by gathering your data from multiple sources, transforming them into valuable insights, and finally visualizing them in stunning charts and graphs.