KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

ApexCharts multilne category label #3352

Closed Filip opened this topic on on Oct 14, 2024 - 6 comments

Filip commented on Oct 14, 2024

Hi, I need to force word wrap or multilne category label. It is possible according to Apex documentation:

https://apexcharts.com/docs/multiline-text-and-line-breaks-in-axes-labels/

Setting options I could only change label field width, but it is not possible to wrap words or force multine label.

 "options"=>array(
                        "yaxis"=>array(
                           "labels"=>array(
                              "show" => true,
                              "maxWidth" => 200
                           ))
                        ),

Could anyone support me in solving this issue ?

Bright commented on Oct 14, 2024

Hi, you have to use xaxis not yaxis

Filip commented on Oct 14, 2024

Hi Bright, I was thinking so, but it seems if I want to manipulate with category labels I need to use yaxis options set. Below my sample code with 2 cases:

  1. xaxis opions set = no reaction on category
 "xaxis"=>array(
                           "labels"=>array(
                              "show" => true,
                              "maxWidth" => 300
                           ))
                        ),

  1. yaxis options set
 "yaxis"=>array(
                           "labels"=>array(
                              "show" => true,
                              "maxWidth" => 300
                           ))
                        ),

Anyway it is still not solving my issue - how to force multinle label. Looking in source rednered code there is <text> tag used, so no chance to use css for that...

Bright commented on Oct 14, 2024

Just convert the normal string to an array of strings in your data. For example:

['ZAM', '02/2024', 'Jan Kowalski'] 

instead of

'ZAM 02/2024 Jan Kowalski'

or you can use

"xaxis"=> array(
  categories=> array(
    ['ZAM', '02/2024', 'Jan Kowalski'],
   ...
  )
)

That's what I meant just now. Sorry for not being clear.

Filip commented on Oct 14, 2024

Thanks Bright, in my case data source is from MySql query and I have tried already to combine category name using this rule directly in query, but it doeasn't work if defined in "columns". I can combine such a string directly in query using:

->query( "SELECT CONCAT('[\'',OrderNumber,'\',\'',Worker,'\']') AS WorkerComb,(...)

(...)
  ->pipe(new ColumnRename(array(
            "WorkerComb"=>"Pracownik",
(...)

...but how to refer to this in xaxis | categories ?

At the moment I have following:

 protected function setup() {
        //Select the data source
        $this->src("3Mreport")
        ->query("
        SELECT CONCAT_WS('\n',OrderNumber,Worker) AS WorkerComb, Station, WGCode, WGName,unit,EffectiveTime, TotalTime, QtyDone, Efektywność, Wydajność, GoalMAX, GoalMIN, EGoal
        FROM WE_STA_TempFinal
        ")
        ->pipe(new ColumnRename(array(
            "WorkerComb"=>"Pracownik",
            "Station"=>"Stanowisko",
            "WGCode"=>"Kod wyrobu",
            "WGName"=>"Nazwa wyrobu",
            "unit"=>"Jedn.",
            "EffectiveTime"=>"Czas efektywny",
            "TotalTime"=>"Czas całkowity",
            "QtyDone"=>"Ilość",
            "GoalMAX"=>"Norma MAX",
            "GoalMIN"=>"Norma MIN",
            "EGoal"=>"Norma akt."
        )))
        ->pipe($this->dataStore("results"));
    }
}

in BarChart create I have:

\koolreport\apexcharts\BarChart::create(array(
                        "name"=>"testchart",
                        "dataSource"=>$this->dataStore('results'),
                        "columns" => array(
                           'Pracownik',
                           'Wydajność' => array(
                              'type'=>'number',
                              'decimals'=>2,
                           ),
                           'Norma MAX' => array(
                              'type'=>'number',
                              'decimals'=>2,
                              'marker' => [
                                 'strokeWidth' => 5,
                                 'strokeColor' => '#775DD0'
                              ]
                           ),
                           'Norma MIN' =>[
                              'marker' => [
                                 'strokeWidth' => 5,
                                 'strokeColor' => '#775DD0'
                              ]

                              ],
                           'Norma akt.'=>[
                              'marker' => [
                                 'strokeWidth' => 5,
                                 'strokeColor' => '#775DD0'
                              ]

                           ]
                              ),
                     "options"=>array(
                        "chart" => array(
                           "height" => '200px',
                        ),
                        
                        "xaxis"=>array(
                           "labels"=>array(
                              "show" => true,
                              "maxWidth" => 300
                           ))
                        ),
 
                      "maxWidth" => "80%",
                     ));
Bright commented on Oct 14, 2024

Is the data returned from $this->dataStore('results') an array?

If not try "dataSource"=>$this->dataStore('results')->toArray() You need to make sure the data you put into dataSouce is an array and the category name is an array of strings. If you want to reference axis | categories you have to enter it manually, which is not recommended for large data

Filip commented on Oct 14, 2024

Thanks Bright - that's it !

Just for the others - here is the sollution - best way is to copy query result to an array, then create an array of category names:

 $data=$this->dataStore('results')->toArray();
            $i=0;
            $cat[]="";
            foreach($data as $res) {
               $cat[$i]=array($res['Pracownik'],$res['Numer zamówienia'],$res['Kod wyrobu']);
               $i=$i+1;
            }

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed
solved

ApexCharts