KoolReport
  1. Home
  2. ChartJs
  3. Tooltip: Border
Tooltip Border

The above example shows you how to create LineChart using ChartJs package. In this example, for purpose of chart demonstration only, we do use mock-up data from array. As you can see, the KoolReport's widget in general support dataSource could be DataStore, Process, DataSource or even simple array.

This example shows how to build a line chart with modified tooltip interface.

For example:

...
"tooltips" => array(
    ...
    "yPadding" => 10,
    "xPadding" => 10,
    "caretSize" => 8,
    "backgroundColor" => 'rgba(72, 241, 12, 1)',
    "titleFontColor" => 'black',
    "bodyFontColor" => 'black',
    "borderColor" => 'rgba(0, 0, 0, 1)',
    "borderWidth" => 4
)
...

<?php
require_once "../../../load.koolreport.php";
require_once "MyReport.php";
$report = new MyReport;
$report->run();
$report->render();
?>

<html>

<head>
    <title>
        Tooltip Border
    </title>
</head>

<body>
</body>

</html>
<?php
class MyReport extends \koolreport\KoolReport
{
    
}

<div id="report_render" style="margin:auto">
    <?php

    $data = [
        ['month' => 'January', 'Dataset' => 10],
        ['month' => 'February', 'Dataset' => 30],
        ['month' => 'March', 'Dataset' => 46],
        ['month' => 'April', 'Dataset' => 2],
        ['month' => 'May', 'Dataset' => 8],
        ['month' => 'June', 'Dataset' => 50],
        ['month' => 'July', 'Dataset' => 0],
    ];

    \koolreport\chartjs\LineChart::create(array(
        'dataSource' => $data,
        'columns' => array(
            "month",
            "Dataset" => array(
                "backgroundColor" => 'rgb(255, 99, 132)',
                "borderColor" => 'rgb(255, 99, 132)',
                'fill' => false
            )
        ),
        "options" => array(
            "responsive" => true,
            "title" => array(
                "display" => true,
                "text" => 'Sample tooltip with border'
            ),
            "tooltips" => array(
                "mode" => 'index',
                "intersect" => false,
                "position" => 'nearest',
                "yPadding" => 10,
                "xPadding" => 10,
                "caretSize" => 8,
                "backgroundColor" => 'rgba(72, 241, 12, 1)',
                "titleFontColor" => 'black',
                "bodyFontColor" => 'black',
                "borderColor" => 'rgba(0, 0, 0, 1)',
                "borderWidth" => 4
            )
        )
    ));
    ?>
</div>

What People Are Saying

"KoolReport helps me very much in creating data report for my corporate! Keep up your good work!"
-- Alain Melsens

"The first use of your product. I was impressed by its easiness and powerfulness. This product is a great and amazing."
-- Dr. Lew Choy Onn

"Fantastic framework for reporting!"
-- Greg Schneider

Download KoolReport Get KoolReport Pro