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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.