github-actions[bot]
commented
1 month ago This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
Issue: When we have less than 4 records then the data label on the x-axis are showing incorrect values. Working fine with more records.
Version: apexcharts@3.40.0 react-apexcharts@1.4.0
View:
Data:
let datalabel = [ { "HighCount": 1, "MediumCount": 0, "LowCount": 2, "FormatDate": "2024-04-14T00:00:00" }, { "HighCount": 1, "MediumCount": 1, "LowCount": 0, "FormatDate": "2024-04-16T00:00:00" }, ];Series:
let series = [{ name: 'High', data: (datalabel || []).map(d => d.HighCount), color: "#FF7F29" }, { name: 'Medium', data: (datalabel || []).map(d => d.MediumCount), color: "#FFCC21" }, { name: 'Low', data: (datalabel || []).map(d => d.LowCount), color: "#02B8AB" },];Options:
let options = { dataLabels: { enabled: false, }, grid: { strokeDashArray: 7, xaxis: { lines: { show: false }, }, yaxis: { lines: { show: true }, }, }, states: { active: { filter: { type: 'none', }, }, hover: { filter: { type: 'none', }, }, }, chart: { type: 'bar', height: 350, stacked: true, toolbar: { show: true, tools: { download: false, selection: true, zoom: true, zoomin: true, zoomout: true, pan: true, reset: true | '<img src="/static/icons/reset.png" width="20">', customIcons: [] }, }, }, stroke: { width: 0, colors: ['#fff'] }, xaxis: { type: 'datetime', title: { text: 'Date', offsetX: 0, offsetY: 0, style: { color: "black", fontSize: '12px', fontFamily: '"Roboto","Segoe UI","Bebas Neue",Tahoma,Geneva,Verdana,sans-serif', fontWeight: "normal" }, }, labels: { format: 'MMM dd', showDuplicates: false, }, tickPlacement: 'on', categories: (datalabel || []).map(d => d.FormatDate) }, yaxis: { axisBorder: { // for yaxis line show: true, offsetX: 0, offsetY: 0 }, show: true, title: { text: "Count", rotate: -90, offsetX: 0, offsetY: 0, style: { color: "black", fontSize: '12px', fontFamily: '"Roboto","Segoe UI","Bebas Neue",Tahoma,Geneva,Verdana,sans-serif', fontWeight: "normal" }, }, }, fill: { opacity: 1 }, legend: { show: false }, };Chart:
<Chart options={options} series={series} type="bar" width="1112" height="340" />