react-apexcharts icon indicating copy to clipboard operation
react-apexcharts copied to clipboard

Offsetting a Specific Series

Open kKar1503 opened this issue 3 years ago • 0 comments

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.

image

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,
      },
    },
  },
};

kKar1503 avatar May 31 '22 17:05 kKar1503