Overview #

Chartjs supports various types of chart. Each type of chart has their own setting, data structure but also shares some common ones.


    "name" => "MyChart",
    // "data" => array(...),
    "title"=>"Sale Report",
    "options" => array(...),
    "colorScheme" => array(...),

Common 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.
dataarrayAn array of data. To be used in case dataSource is null
columnsarray/mixedSpecify the list of columns will be used to draw chart
optionsarraySpecify extra options for charts, see extra options section for more details.
pluginsarraySpecify multiple plugins for charts.
inlinePluginsarraySpecify direct inline plugins.
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

List of supported plugins includes "annotation", "datalabels", "draggable", "stacked100", "waterfall", "zoom", "barFunnel", "linearGauge", "smith", "timeline". List of supported inline plugins includes "beforeInit", "afterInit", "beforeUpdate", "afterUpdate", "beforeLayout", "afterLayout", "beforeDatasetsUpdate", "afterDatasetsUpdate", "beforeDatasetUpdate", "afterDatasetUpdate", "beforeRender", "afterRender", "beforeDraw", "afterDraw", "beforeDatasetsDraw", "afterDatasetsDraw", "beforeDatasetDraw", "afterDatasetDraw", "beforeEvent", "afterEvent", "resize", "destroy". Here's an example of using inline plugins:

        "inlinePlugins" => array(
            "beforeInit" => "function(chart, args, options) {
            }", // wrap client js function in double or single quotes

Common 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
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, for BarChart, ColumnChart, ComboChart, LineChart, AreaChart 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

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.