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'
}
};
probably caused by using the same x: category
you could try prepending the task name
name: 'task1',
data: [
{
x: 'task1: Team Health', // <-- prepend task name here
y: [
new Date('2021-03-01').getTime(),
new Date('2021-03-02').getTime()
]
},