ChartJS，条形图标签中的多行

Question

I am using ChartJS library to draw chart in a PHP project. In a bar chart I want the label in X-axis in two line .

What is the way?

My Current chart is like

I want my Chart like below

Here is my Code Snippet

<?php   
 $array_data = sql::rows("attendance_summary_report","DateVal between 
 '{$previous_date}' and '{$last_date}' order by DateVal asc");
    //print_r($array_data);
    $level_array=array();
    $pre_array=array();
    $abs_array=array();
    if(is_array($array_data) && count($array_data)>0){
        foreach($array_data as $ad){
            if($ad['DayVal']==''){
                $ad['DayVal']='No Day';
                $ad['present']=0;
                $ad['absent']=0;
            }
            array_push($level_array, 
  $ad['DayVal']."\n".date('d/m',strtotime($ad['DateVal'])));
            array_push($pre_array,$ad['present']);
            array_push($abs_array,$ad['absent']);
        }
    }
 ?>

 <script> $(function () { var areaChartData = { labels : <?php echo json_encode($level_array,true)?>, datasets: [......] } var barChartCanvas = $('#barChart').get(0).getContext('2d') var barChartData = jQuery.extend(true, {}, areaChartData) var temp0 = areaChartData.datasets[0] var temp1 = areaChartData.datasets[1] barChartData.datasets[0] = temp1 barChartData.datasets[1] = temp0 var barChart = new Chart(barChartCanvas, { type: 'bar', data: barChartData, options: barChartOptions }) } </script>

Answer 1

This can be achieved by passing the label as an array of strings where each element represents a line, eg:

let labels = [
  'A', // normal label.
  ['First line', 'Second line', '...'] // multi-line label.
];

A working example:

 new Chart(document.getElementById("chart"), { type: 'bar', data: { labels: ['A', ['Water', 'Heating'], 'C'], datasets: [{ data: [1, 1, 1] }] } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <canvas id="chart"></canvas>