The below-mentioned script shows the output as shown in the attached picture. The data are displayed properly but except for the last one. In my data, you can see the data of 17th Jan is showing only two columns which are supposed to show 3 columns. On the other hand, if I use the zoom out tool, It displays all the data properly.
I need help to display the data normally without zoom out. I think it might have an issue with the CSS of the graph
**I am fetching the data from a JSON file using for each loop
<script> var options = { series: [{ name: 'T.Ticket Closed', type: 'column', data: [<?php foreach ($json as $key => $value) { echo $value["ttc_closed"] . ", "; } ?>] }, { name: 'T.Ticket Open', type: 'column', data: [<?php foreach ($json as $key => $value) { echo $value["ttc_open"] . ", "; } ?>] }, { name: 'Pending 24H Plus', type: 'column', data: [<?php foreach ($json as $key => $value) { echo $value["24p"] . ", "; } ?>] }, { name: 'T.Ticket Solved Ratio', type: 'line', data: [<?php foreach ($json as $key => $value) { echo $value["ttc_solve_r"] . ", "; } ?>] }], chart: { height: 350, type: 'line', stacked: false }, dataLabels: { enabled: true }, stroke: { width: [1, 1, 1, 4] }, title: { text: '', align: 'left', offsetX: 110 }, xaxis: { type: 'datetime', categories: [<?php foreach ($json as $key => $value) { echo date("'d F Y' ",strtotime($value["report_date"])). ", "; } ?>], }, yaxis: [ { axisTicks: { show: true, }, axisBorder: { show: true, color: '#008FFB' }, labels: { style: { colors: '#008FFB', } }, title: { text: "", style: { color: '#008FFB', } }, tooltip: { enabled: true } }, { seriesName: '', opposite: true, axisTicks: { show: true, }, axisBorder: { show: true, color: '#00E396' }, labels: { style: { colors: '#00E396', } }, title: { text: "", style: { color: '#00E396', } }, }, { seriesName: '', opposite: true, axisTicks: { show: true, }, axisBorder: { show: true, color: '#FEB019' }, labels: { style: { colors: '#FEB019', }, }, title: { text: "", style: { color: '#FEB019', } } }, { seriesName: '', opposite: true, axisTicks: { show: true, }, axisBorder: { show: true, color: '#FB0021' }, labels: { style: { colors: '#FB0021', }, }, title: { text: "", style: { color: '#FB0021', } } }, ], tooltip: { fixed: { enabled: true, position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft offsetY: 30, offsetX: 60 }, }, legend: { horizontalAlign: 'left', offsetX: 40 } }; //TT ressolution var chart = new ApexCharts(document.querySelector("#tt_resolution"), options); chart.render(); </script[![enter image description here][1]][1]> 
没有评论:
发表评论