react-apexcharts
react-apexcharts copied to clipboard
Offsetting a Specific Series
Hello! I actually would like to check if it's possible, for me to offset a specific series, like in the stated image, I'm using 2 series of datas, both from a different date, my options.xaxis.type in this case is set to "datetime".
So I'm wondering if given datetime as the x-axis, am I able to offset for example Series 2 (17 August 2021), to overlay above Series 1 (10 August 2021), such that 10 August 2021 00:00hrs and 17 August 2021 00:00hrs are aligned.
I've also attached my this.state below in a code block on what I currently have.

this.state = {
series: [
{
name: "10 August 2021",
data: [
{
x: "Item A",
y: [
new Date("2021-08-10 13:20:27").getTime(),
new Date("2021-08-10 15:07:55").getTime(),
],
},
{
x: "Item C",
y: [
new Date("2021-08-10 13:16:42").getTime(),
new Date("2021-08-10 14:23:08").getTime(),
],
},
{
x: "Item D",
y: [
new Date("2021-08-10 13:16:50").getTime(),
new Date("2021-08-10 14:23:00").getTime(),
],
},
{
x: "Item E",
y: [
new Date("2021-08-10 13:16:56").getTime(),
new Date("2021-08-10 14:22:56").getTime(),
],
},
],
},
{
name: "17 August 2021",
data: [
{
x: "Item B",
y: [
new Date("2021-08-17 13:18:37").getTime(),
new Date("2021-08-17 14:57:28").getTime(),
],
},
{
x: "Item C",
y: [
new Date("2021-08-17 13:23:09").getTime(),
new Date("2021-08-17 14:27:56").getTime(),
],
},
{
x: "Item D",
y: [
new Date("2021-08-17 13:23:12").getTime(),
new Date("2021-08-17 14:27:44").getTime(),
],
},
{
x: "Item E",
y: [
new Date("2021-08-17 13:23:23").getTime(),
new Date("2021-08-17 14:27:45").getTime(),
],
},
],
},
],
options: {
chart: {
height: 450,
type: "rangeBar",
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
},
plotOptions: {
bar: {
horizontal: true,
barHeight: "80%",
},
},
xaxis: {
type: "datetime",
min: new Date("2021-08-10 00:00:00").getTime(),
max: new Date("2021-08-17 23:59:59").getTime(),
labels: {
datetimeUTC: false,
},
},
},
};