Custom CSS for chart title

peter sereny commented on Aug 26, 2019

Hi!

I want to add custom font, font-size, and position to it the title of my charts. The ChartJS options are not working for it (these: https://www.chartjs.org/docs/latest/configuration/title.html )

(The custom position I want is exactly like this:

How can I set these parameters?

KoolReport commented on Aug 27, 2019

Hi,

Please try to do this:

LineChart::create(array(
    "options"=>array(
        "title"=>array(
            "display"=>true,
            "text"=>"Chart title",
            "position"=>"top",
            "padding"=>10
        )
    )
))

peter sereny commented on Aug 27, 2019

Hi, thanks for your answer!

Maybe it doesn't even passes the title parameters, since not even the 'text' shows up?

    "dataStore"=>$this->dataStore("data"),
    "columns" => array(
...
    ),
    "colorScheme"=>array(
...
    ),
    "options" => array(
        'chartArea' => array(
            'left'=>45,
            'right'=>20
        ),
        "title"=>array(
            "fontFamily"=>"'Raleway', sans-serif",
            "fontSize"=>21,
            "display"=>true,
            "text"=>"HEADER TEXT",
            "position"=>"top",
            "padding"=>10
        ),
        "legend"=>array(
            "position"=> 'top',
            "alignment"=>"end"
        ),
        "bar"=>array(
            "groupWidth"=> 50
        ),
        "vAxis"=>array(
            "textStyle"=>array(
                "bold"=>"true"
            )
        ),
        "hAxis"=>array(
            "textStyle"=>array(
                "bold"=>"true"
            )
        ),
    ),

peter sereny commented on Aug 28, 2019

The options/title parameter only works if its a string (containing the displayable text), not an array, so it can't be configured now?

KoolReport commented on Aug 28, 2019

I have made a test and it seems working fine, you can paste below code and it will work:

        <?php
        \koolreport\chartjs\ColumnChart::create([
            "options"=>[
                "title"=>[
                    "display"=>true,
                    "text"=>"Any text",
                    "top"=>"50px",
                    "fontFamily"=>"'Raleway', sans-serif",
                    "fontSize"=>21,
                ]
            ],
            "dataSource"=>[
                ["name"=>"Peter","age"=>35],
                ["name"=>"David","age"=>25],
            ],
        ]);
        ?>

If you set title in both places, inside the "options" and outside of it, please remove the outside one.

KoolReport's Forum

Custom CSS for chart title #1059

Build Your Excellent Data Report