javascript - How to display items without overlapping? - Stack Overflow

i'm trying to make reservation chart with using ChartJs in react.

const scheduleData = {
  data: [
    {
      name: "testNameA",
      title: "a teatment",
      start: new Date(2025, 0, 1, 9, 0, 0),
      end: new Date(2025, 0, 1, 10, 0, 0),
    },
    {
      name: "testNameB",
      title: "b teatment",
      start: new Date(2025, 0, 1, 9, 0, 0),
      end: new Date(2025, 0, 1, 10, 0, 0),
    },
    {
      name: "testNameC",
      title: "c teatment",
      start: new Date(2025, 0, 1, 10, 0, 0),
      end: new Date(2025, 0, 1, 11, 0, 0),
    },
    {
      name: "testNameD",
      title: "d teatment",
      start: new Date(2025, 0, 1, 11, 0, 0),
      end: new Date(2025, 0, 1, 12, 0, 0),
    },
    {
      name: "testNameE",
      title: "e teatment",
      start: new Date(2025, 0, 1, 14, 0, 0),
      end: new Date(2025, 0, 1, 15, 0, 0),
    },
    {
      name: "testNameF",
      title: "f teatment",
      start: new Date(2025, 0, 2, 9, 0, 0),
      end: new Date(2025, 0, 2, 10, 0, 0),
    },
    {
      name: "testNameG",
      title: "g teatment",
      start: new Date(2025, 0, 3, 9, 0, 0),
      end: new Date(2025, 0, 3, 10, 0, 0),
    },
  ],

  openTime: 9,
  closeTime: 19,
};

                    data: scheduleData.data.map((schedule) => {
                      return {
                        x:
                          dayNames[Number(moment(schedule.start).format("d"))] +
                          schedule.start.getDate(),
                        y: [
                          moment(schedule.start).hour(),
                          moment(schedule.end).hour(),
                        ],
                        title: schedule.title,
                        name: schedule.name,
                      };
                    }),

as you can see, x value is for start date, y value is for hour value of start,end

if i make a bar chart with this, this happens.

testNameA, testNameB has the same start date value. so it seems ovelapped bar items.

What I want to implement is, if you have the same start date, make the items all visible in the same position without overlapping.

like this.

And if you don't have multiple items with the same date value, I want to make it look like the previous image.

i tried using multiple datasets, but this is the result what i'm getting

how to display items without overlapping in ChartJs?

i'm trying to make reservation chart with using ChartJs in react.

const scheduleData = {
  data: [
    {
      name: "testNameA",
      title: "a teatment",
      start: new Date(2025, 0, 1, 9, 0, 0),
      end: new Date(2025, 0, 1, 10, 0, 0),
    },
    {
      name: "testNameB",
      title: "b teatment",
      start: new Date(2025, 0, 1, 9, 0, 0),
      end: new Date(2025, 0, 1, 10, 0, 0),
    },
    {
      name: "testNameC",
      title: "c teatment",
      start: new Date(2025, 0, 1, 10, 0, 0),
      end: new Date(2025, 0, 1, 11, 0, 0),
    },
    {
      name: "testNameD",
      title: "d teatment",
      start: new Date(2025, 0, 1, 11, 0, 0),
      end: new Date(2025, 0, 1, 12, 0, 0),
    },
    {
      name: "testNameE",
      title: "e teatment",
      start: new Date(2025, 0, 1, 14, 0, 0),
      end: new Date(2025, 0, 1, 15, 0, 0),
    },
    {
      name: "testNameF",
      title: "f teatment",
      start: new Date(2025, 0, 2, 9, 0, 0),
      end: new Date(2025, 0, 2, 10, 0, 0),
    },
    {
      name: "testNameG",
      title: "g teatment",
      start: new Date(2025, 0, 3, 9, 0, 0),
      end: new Date(2025, 0, 3, 10, 0, 0),
    },
  ],

  openTime: 9,
  closeTime: 19,
};

                    data: scheduleData.data.map((schedule) => {
                      return {
                        x:
                          dayNames[Number(moment(schedule.start).format("d"))] +
                          schedule.start.getDate(),
                        y: [
                          moment(schedule.start).hour(),
                          moment(schedule.end).hour(),
                        ],
                        title: schedule.title,
                        name: schedule.name,
                      };
                    }),

as you can see, x value is for start date, y value is for hour value of start,end

if i make a bar chart with this, this happens.

testNameA, testNameB has the same start date value. so it seems ovelapped bar items.

What I want to implement is, if you have the same start date, make the items all visible in the same position without overlapping.

like this.

And if you don't have multiple items with the same date value, I want to make it look like the previous image.

i tried using multiple datasets, but this is the result what i'm getting

how to display items without overlapping in ChartJs?

• javascript
• reactjs
• charts
• react-chartjs

Share Improve this question Follow edited Jan 15 at 6:17 DarkBee 15.5k88 gold badges7272 silver badges118118 bronze badges asked Jan 15 at 5:29 jyc-coderjyc-coder 3122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

In Chart.js, there are some limitations. While you can use a Scatter Chart with customizations, implementing this in HTML using the <table> tag is often easier.