• Overview
• Add plugins to chart
• Plugin settings
• Sample Code

Plugins

Overview #

Plugins are the most efficient way to customize or change the default behavior of a chart. We support most of popular plugins

1. annotation: Draws lines and boxes on chart area.
2. datalabels: Displays labels on data for any type of charts.
3. draggable: Makes select chart elements draggable with the mouse.
4. stacked100: Draws 100% stacked bar chart.
5. waterfall: Enables easy use of waterfall charts.
6. zoom: Enables zooming and panning on charts.

Add plugins to chart #

<?php
\koolreport\chartjs\LineChart::create(array(
    ...
    "plugins"=>array("annotation","datalabels")
));

Plugin settings #

Some plugins requires settings, the settings are organize under options.plugins. It follows with the name of plugin and the settings for it.

<?php
\koolreport\chartjs\LineChart::create(array(
    ...
    "plugins"=>array("annotation"),
    "options"=>array(
        "plugins"=>array(
            "annotation"=>array(
                "drawTime"=> "afterDatasetsDraw",
                "dblClickSpeed"=> 350,
                ...
            )
        )
    ),
    ...
));

For the detail settings for each plugins, please refer to plugin Github page or its documentation.

Sample Code #

Code:

\koolreport\chartjs\PieChart::create(array(
    "title"=>"Sale Of Category",
    "dataSource"=>array(
        array("category"=>"Books","sale"=>32000,"cost"=>20000,"profit"=>12000),
        array("category"=>"Accessories","sale"=>43000,"cost"=>36000,"profit"=>7000),
        array("category"=>"Phones","sale"=>54000,"cost"=>39000,"profit"=>15000),
        array("category"=>"Movies","sale"=>23000,"cost"=>18000,"profit"=>5000),
        array("category"=>"Others","sale"=>12000,"cost"=>6000,"profit"=>6000),
    ),
    "columns"=>array(
        "category",
        "cost"=>array(
            "type"=>"number",
            "prefix"=>"$",
        )
    ),
    "plugins"=>array("datalabels"),
    "options"=>array(
        "plugins"=>array(
            "datalabels"=>array(
                "color"=> "#ffffff",
            )
        )
    ),
));