I have created a horizontal bar stacked chart using apexcharts but I'm stuck at one and the last phase of completion and I tried so hard but were unable to find the solution, I've attached the actual chart and expected as well, all I want is just to group bars and show bars title.
series and options:
const series = [
{
name: 'Order Date',
data: [
{ x: 'SWGR-MVA', y: ['2021-6-1', '2021-6-30'] },
{ x: 'HV-8PT-1', y: ['2021-6-1', '2021-6-23'] },
{ x: '8PT-1', y: ['2021-6-1', '2021-6-30'] },
{ x: 'HV-8PT-2', y: ['2021-6-1', '2021-6-23'] },
{ x: '8PT-2', y: ['2021-6-1', '2021-6-30'] },
{ x: 'HV-45PT-1', y: ['2021-6-1', '2021-6-23'] },
{ x: '45PT-1', y: ['2021-6-1', '2021-6-30'] },
{ x: 'HV-45PT-2', y: ['2021-6-1', '2021-6-23'] },
{ x: '45PT-2', y: ['2021-6-1', '2021-6-30'] },
{ x: 'SWBD-AAA', y: ['2021-6-1', '2021-6-20'] },
{ x: 'SWBD-BBB', y: ['2021-6-1', '2021-6-20'] },
{ x: 'EM3VJOFPPF', y: ['2021-6-1', '2021-6-25'] },
{ x: 'SWBD-CCC', y: ['2021-6-1', '2021-6-20'] },
{ x: 'SWBD-DDD', y: ['2021-6-1', '2021-6-20'] },
{ x: 'RA7PSYODY6', y: ['2021-6-1', '2021-6-25'] },
{ x: 'ATS-8LSBB', y: ['2021-6-1', '2021-6-15'] },
{ x: 'SWBD-8LSBB', y: ['2021-6-1', '2021-6-20'] },
{ x: 'ATS-8XBB', y: ['2021-6-1', '2021-6-15'] },
{ x: 'SWBD-8XBB', y: ['2021-6-1', '2021-6-20'] },
{ x: 'ATS-45LSDD', y: ['2021-6-1', '2021-6-15'] },
{ x: 'SWBD-45LSDD', y: ['2021-6-1', '2021-6-20'] },
{ x: 'ATS-45XDD', y: ['2021-6-1', '2021-6-15'] },
{ x: 'SWBD-45XDD', y: ['2021-6-1', '2021-6-20'] },
{ x: 'SWBD-45XBB', y: ['2021-6-1', '2021-6-20'] },
],
},
{
name: 'Order Date Delay',
data: [{ x: 'SWGR-MVA', y: ['2021-6-20', '2021-6-30'] }],
},
{
name: 'Approval Drawings',
data: [
{ x: 'SWGR-MVA', y: ['2021-6-30', '2021-7-21'] },
{ x: 'HV-8PT-1', y: ['2021-6-23', '2021-7-15'] },
{ x: '8PT-1', y: ['2021-6-30', '2021-7-21'] },
{ x: 'HV-8PT-2', y: ['2021-6-23', '2021-7-15'] },
{ x: '8PT-2', y: ['2021-6-30', '2021-7-21'] },
{ x: 'HV-45PT-1', y: ['2021-6-23', '2021-7-15'] },
{ x: '45PT-1', y: ['2021-6-30', '2021-7-21'] },
{ x: 'HV-45PT-2', y: ['2021-6-23', '2021-7-15'] },
{ x: '45PT-2', y: ['2021-6-30', '2021-7-21'] },
{ x: 'SWBD-AAA', y: ['2021-6-20', '2021-7-18'] },
{ x: 'SWBD-BBB', y: ['2021-6-20', '2021-7-18'] },
{ x: '7RV3BTUV2E', y: ['2021-6-25', '2021-7-18'] },
{ x: 'SWBD-CCC', y: ['2021-6-20', '2021-7-18'] },
{ x: 'SWBD-DDD', y: ['2021-6-20', '2021-7-18'] },
{ x: 'C5B4JOLXM5', y: ['2021-6-25', '2021-7-18'] },
{ x: 'ATS-8LSBB', y: ['2021-6-15', '2021-7-18'] },
{ x: 'SWBD-8LSBB', y: ['2021-6-20', '2021-7-18'] },
{ x: 'ATS-8XBB', y: ['2021-6-15', '2021-7-18'] },
{ x: 'SWBD-8XBB', y: ['2021-6-20', '2021-7-18'] },
{ x: 'ATS-45LSDD', y: ['2021-6-15', '2021-7-18'] },
{ x: 'SWBD-45LSDD', y: ['2021-6-20', '2021-7-18'] },
{ x: 'ATS-45XDD', y: ['2021-6-15', '2021-7-18'] },
{ x: 'SWBD-45XDD', y: ['2021-6-20', '2021-7-18'] },
{ x: 'SWBD-45XBB', y: ['2021-6-20', '2021-7-18'] },
],
},
{
name: 'Approval Drawings Delay',
data: [{ x: 'HV-8PT-1', y: ['2021-7-8', '2021-7-15'] }],
},
{
name: 'Release For Manufacture',
data: [
{ x: 'SWGR-MVA', y: ['2021-7-21', '2021-11-1'] },
{ x: 'HV-8PT-1', y: ['2021-7-15', '2021-9-30'] },
{ x: '8PT-1', y: ['2021-7-21', '2021-10-15'] },
{ x: 'HV-8PT-2', y: ['2021-7-15', '2021-9-30'] },
{ x: '8PT-2', y: ['2021-7-21', '2021-10-15'] },
{ x: 'HV-45PT-1', y: ['2021-7-15', '2021-9-30'] },
{ x: '45PT-1', y: ['2021-7-21', '2021-10-15'] },
{ x: 'HV-45PT-2', y: ['2021-7-15', '2021-9-30'] },
{ x: '45PT-2', y: ['2021-7-21', '2021-10-15'] },
{ x: 'SWBD-AAA', y: ['2021-7-18', '2021-10-1'] },
{ x: 'SWBD-BBB', y: ['2021-7-18', '2021-10-1'] },
{ x: 'SWBD-CCC', y: ['2021-7-18', '2021-10-1'] },
{ x: 'SWBD-DDD', y: ['2021-7-18', '2021-10-1'] },
{ x: 'ATS-8LSBB', y: ['2021-7-18', '2021-8-31'] },
{ x: 'SWBD-8LSBB', y: ['2021-7-18', '2021-10-1'] },
{ x: 'ATS-8XBB', y: ['2021-7-18', '2021-8-31'] },
{ x: 'SWBD-8XBB', y: ['2021-7-18', '2021-10-1'] },
{ x: 'ATS-45LSDD', y: ['2021-7-18', '2021-8-31'] },
{ x: 'SWBD-45LSDD', y: ['2021-7-18', '2021-10-1'] },
{ x: 'ATS-45XDD', y: ['2021-7-18', '2021-8-31'] },
{ x: 'SWBD-45XDD', y: ['2021-7-18', '2021-10-1'] },
{ x: 'SWBD-45XBB', y: ['2021-7-18', '2021-10-1'] },
],
},
{
name: 'Release For Manufacture Delay',
data: [
{ x: 'HV-45PT-1', y: ['2021-8-18', '2021-9-30'] },
{ x: '45PT-1', y: ['2021-8-21', '2021-10-15'] },
],
},
{
name: 'Test Date',
data: [
{ x: 'SWGR-MVA', y: ['2021-11-1', '2021-11-4'] },
{ x: 'HV-8PT-1', y: ['2021-9-30', '2021-10-5'] },
{ x: '8PT-1', y: ['2021-10-15', '2021-10-18'] },
{ x: 'HV-8PT-2', y: ['2021-9-30', '2021-10-5'] },
{ x: '8PT-2', y: ['2021-10-15', '2021-10-18'] },
{ x: 'HV-45PT-1', y: ['2021-9-30', '2021-10-5'] },
{ x: '45PT-1', y: ['2021-10-15', '2021-10-18'] },
{ x: 'HV-45PT-2', y: ['2021-9-30', '2021-10-5'] },
{ x: '45PT-2', y: ['2021-10-15', '2021-10-18'] },
{ x: 'SWBD-AAA', y: ['2021-10-1', '2021-10-5'] },
{ x: 'SWBD-BBB', y: ['2021-10-1', '2021-10-5'] },
{ x: 'SWBD-CCC', y: ['2021-10-1', '2021-10-5'] },
{ x: 'SWBD-DDD', y: ['2021-10-1', '2021-10-5'] },
{ x: 'ATS-8LSBB', y: ['2021-8-31', '2021-9-4'] },
{ x: 'SWBD-8LSBB', y: ['2021-10-1', '2021-10-5'] },
{ x: 'ATS-8XBB', y: ['2021-8-31', '2021-9-4'] },
{ x: 'SWBD-8XBB', y: ['2021-10-1', '2021-10-5'] },
{ x: 'ATS-45LSDD', y: ['2021-8-31', '2021-9-4'] },
{ x: 'SWBD-45LSDD', y: ['2021-10-1', '2021-10-5'] },
{ x: 'ATS-45XDD', y: ['2021-8-31', '2021-9-4'] },
{ x: 'SWBD-45XDD', y: ['2021-10-1', '2021-10-5'] },
{ x: 'SWBD-45XBB', y: ['2021-10-1', '2021-10-5'] },
],
},
{
name: 'Test Date Delay',
data: [{ x: 'SWBD-8XBB', y: ['2021-10-2', '2021-10-5'] }],
},
{
name: 'Ship Date',
data: [
{ x: 'SWGR-MVA', y: ['2021-11-4', '2021-11-9'] },
{ x: 'HV-8PT-1', y: ['2021-10-5', '2021-10-9'] },
{ x: '8PT-1', y: ['2021-10-18', '2021-10-20'] },
{ x: 'HV-8PT-2', y: ['2021-10-5', '2021-10-9'] },
{ x: '8PT-2', y: ['2021-10-18', '2021-10-20'] },
{ x: 'HV-45PT-1', y: ['2021-10-5', '2021-10-9'] },
{ x: '45PT-1', y: ['2021-10-18', '2021-10-20'] },
{ x: 'HV-45PT-2', y: ['2021-10-5', '2021-10-9'] },
{ x: '45PT-2', y: ['2021-10-18', '2021-10-20'] },
{ x: 'SWBD-AAA', y: ['2021-10-5', '2021-10-10'] },
{ x: 'SWBD-BBB', y: ['2021-10-5', '2021-10-10'] },
{ x: '2H30E81WAN', y: ['2021-10-5', '2021-10-10'] },
{ x: 'SWBD-CCC', y: ['2021-10-5', '2021-10-10'] },
{ x: 'SWBD-DDD', y: ['2021-10-5', '2021-10-10'] },
{ x: '742INZHY93', y: ['2021-10-5', '2021-10-10'] },
{ x: 'ATS-8LSBB', y: ['2021-9-4', '2021-9-8'] },
{ x: 'SWBD-8LSBB', y: ['2021-10-5', '2021-10-10'] },
{ x: 'ATS-8XBB', y: ['2021-9-4', '2021-9-8'] },
{ x: 'SWBD-8XBB', y: ['2021-10-5', '2021-10-10'] },
{ x: 'ATS-45LSDD', y: ['2021-9-4', '2021-9-8'] },
{ x: 'SWBD-45LSDD', y: ['2021-10-5', '2021-10-10'] },
{ x: 'ATS-45XDD', y: ['2021-9-4', '2021-9-8'] },
{ x: 'SWBD-45XDD', y: ['2021-10-5', '2021-10-10'] },
{ x: 'SWBD-45XBB', y: ['2021-10-5', '2021-10-10'] },
],
},
{
name: 'Ship Date Delay',
data: [
{ x: 'SWBD-AAA', y: ['2021-10-1', '2021-10-10'] },
{ x: 'SWBD-8LSBB', y: ['2021-10-2', '2021-10-10'] },
{ x: 'ATS-8XBB', y: ['2021-9-3', '2021-9-8'] },
],
},
];
const options = {
plotOptions: {
bar: {
horizontal: true,
barHeight: '63%',
rangeBarGroupRows: true,
},
},
dataLabels: {
enabled: true,
enabledOnSeries: [1, 3, 5, 7, 9],
formatter: function (val) {
var a = moment(val[0]);
var b = moment(val[1]);
var diff = b.diff(a, 'days');
return '+' + diff; //+ (diff > 1 ? ' days' : ' day')
},
textAnchor: 'middle',
distributed: false,
offsetX: 0,
offsetY: 0,
style: {
fontSize: '12px',
colors: ['#ffffff'],
},
dropShadow: {
enabled: false,
top: 1,
left: 1,
blur: 1,
color: '#000',
opacity: 0.45,
},
},
colors: [
'#008FFB',
'#0065b3',
'#00E396',
'#00b377',
],
fill: {
type: 'gradient',
gradient: {
shade: 'light',
type: 'diagonal',
shadeIntensity: 0.01,
gradientToColors: undefined,
inverseColors: false,
opacityFrom: 0.7,
opacityTo: 0.9,
},
},
dropShadow: {
enabled: true,
top: 0,
left: 0,
blur: 2,
opacity: 0.5,
},
grid: {
show: true,
borderColor: '#DEE2E6', //'#90A4AE'
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: false,
},
},
yaxis: {
lines: {
show: true,
},
},
row: {
colors: undefined,
opacity: 0.1,
},
column: {
colors: undefined,
opacity: 0.1,
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0,
},
},
xaxis: {
type: 'datetime',
min: undefined,
labels: {
show: true,
rotate: -45,
rotateAlways: false,
hideOverlappingLabels: true,
showDuplicates: false,
trim: false,
minHeight: undefined,
maxHeight: 120,
style: {
colors: [],
fontSize: '12px',
fontWeight: 400,
cssClass: 'apexcharts-xaxis-label',
},
offsetX: 0,
offsetY: 0,
format: undefined,
formatter: undefined,
datetimeUTC: true,
datetimeFormatter: {
year: 'yyyy',
month: "MMM 'yy",
day: 'dd MMM',
hour: 'HH:mm',
},
},
lines: {
show: true,
},
axisTicks: {
show: true,
borderType: 'solid',
color: '#78909C',
height: 6,
offsetX: 0,
offsetY: 0,
},
axisBorder: {
show: true,
color: '#78909C',
height: 1,
width: '100%',
offsetX: 0,
offsetY: 0,
},
crosshairs: {
show: true,
width: 1,
position: 'back',
opacity: 0.9,
stroke: {
color: '#b6b6b6',
width: 0,
dashArray: 0,
},
fill: {
type: 'solid',
color: '#B1B9C4',
gradient: {
colorFrom: '#D8E3F0',
colorTo: '#BED1E6',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
},
},
dropShadow: {
enabled: false,
top: 0,
left: 0,
blur: 1,
opacity: 0.4,
},
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: 0,
fontFamily: 0,
},
},
},
yaxis: {
lines: {
show: true,
},
labels: {
show: true,
rotate: 0,
rotateAlways: false,
hideOverlappingLabels: true,
showDuplicates: false,
trim: false,
minHeight: undefined,
maxHeight: 120,
style: {
colors: [],
fontSize: '12px',
fontWeight: 400,
cssClass: 'apexcharts-xaxis-label',
},
offsetX: 0,
offsetY: 0,
format: undefined,
formatter: undefined,
datetimeUTC: true,
datetimeFormatter: {
year: 'yyyy',
month: "MMM 'yy",
day: 'dd MMM',
hour: 'HH:mm',
},
},
title: {
text: 'Equipment Tags',
rotate: -90,
offsetX: -1,
offsetY: 0,
style: {
color: undefined,
fontSize: '12px',
fontWeight: 600,
cssClass: 'apexcharts-yaxis-title',
},
},
axisTicks: {
show: true,
borderType: 'solid',
color: '#78909C',
height: 6,
offsetX: 0,
offsetY: 0,
},
axisBorder: {
show: true,
color: '#78909C',
height: 1,
width: '100%',
offsetX: 0,
offsetY: 0,
},
crosshairs: {
show: true,
width: 1,
position: 'back',
opacity: 0.9,
stroke: {
color: '#b6b6b6',
width: 0,
dashArray: 0,
},
fill: {
type: 'solid',
color: '#B1B9C4',
gradient: {
colorFrom: '#D8E3F0',
colorTo: '#BED1E6',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
},
},
dropShadow: {
enabled: false,
top: 0,
left: 0,
blur: 1,
opacity: 0.4,
},
},
},
annotations: {
xaxis: [
{
x: new Date('15 Sep 2021').getTime(), //new Date().getTime()
borderColor: '#999',
yAxisIndex: 0,
label: {
show: true,
text: "Today's Date",
style: {
color: '#fff',
background: '#775DD0',
},
},
},
],
},
chart: {
background: '#fff',
foreColor: '#373d3f',
},
legend: {
show: true,
showForSingleSeries: false,
showForNullSeries: true,
showForZeroSeries: true,
position: 'right',
horizontalAlign: 'left',
floating: false,
fontSize: '13px',
fontWeight: 400,
formatter: undefined,
inverseOrder: false,
width: undefined,
height: undefined,
tooltipHoverFormatter: undefined,
customLegendItems: [],
offsetX: 0,
offsetY: 0,
labels: {
colors: undefined,
useSeriesColors: false,
},
markers: {
width: 10,
height: 10,
strokeWidth: 0,
strokeColor: '#fff',
fillColors: undefined,
radius: 12,
customHTML: undefined,
onClick: undefined,
offsetX: 0,
offsetY: 0,
},
itemMargin: {
horizontal: 20,
vertical: 4,
},
onItemClick: {
toggleDataSeries: true,
},
onItemHover: {
highlightDataSeries: true,
},
},
};
current output:
What I want:
Actual: -----------------------------
SWGR-MVA
Original: -----------------------------
Expected output image just to get a clear idea of what I want:
