I’m trying to display a Range Bar Chart with AppexCharts for team due date tasks (2 tasks or above).
every task can have multiple bars
if the number of bars in each task is more than 2 the bars of each task get into each other
please take a look at this example that can explain my point clearly .
Thank you .
var options = {
series: [
{
name: 'task1',
data: [
{
x: 'Team Health',
y: [
new Date('2021-03-01').getTime(),
new Date('2021-03-02').getTime()
]
},
{
x: 'Team Health',
y: [
new Date('2021-03-02').getTime(),
new Date('2021-03-05').getTime()
]
},
{
x: 'Team Health',
y: [
new Date('2021-03-01').getTime(),
new Date('2021-03-07').getTime()
]
},
{
x: 'Team Health',
y: [
new Date('2021-03-02').getTime(),
new Date('2021-03-08').getTime()
]
},
{
x: 'Team Health',
y: [
new Date('2021-03-01').getTime(),
new Date('2021-03-05').getTime()
]
},
]
},
{
name: 'task2',
data: [
{
x: 'Team Health',
y: [
new Date('2021-03-01').getTime(),
new Date('2021-03-10').getTime()
]
},
{
x: 'Team Health',
y: [
new Date('2021-03-01').getTime(),
new Date('2021-03-03').getTime()
]
},
{
x: 'Team Health',
y: [
new Date('2021-03-3').getTime(),
new Date('2021-03-08').getTime()
]
},
]
},
],
chart: {
height:400,
type: 'rangeBar'
},
plotOptions: {
bar: {
horizontal: true,
barHeight: '80%',
rangeBarOverlap: false,
columnWidth: '10%',
}
},
xaxis: {
type: 'datetime',
position: 'top',
},
stroke: {
width: 1
},
fill: {
type: 'solid',
opacity: 0.6
},
legend: {
position: 'top',
horizontalAlign: 'center'
}
};