Can I make a chart like this with chart.js?

[gyeongtae-mo]

( First, the words may sound a little strange using a translator. )

I succeeded in making a Gantt Chart like the image with chart.js.
However, I want to draw the gradation part similarly, if not equally, around the element being drawn.
Can I get involved in the rendering process of chart.js and draw it?

[Udemology]

Hi @gyeongtae-mo ,

I think this is possible. Am I correct your bar chart is a horizontal floating bar chart with category Axis on the y scale.
I suspect the bottom tracks time (sleep patterns?). You have 4 categories and it will never have 2 bar on the same x scale value.

Secondly, this is a single dataset?

I will explore this, it requires a custom plugin that would draw before the datasets are draw if it is a single dataset.

[gyeongtae-mo]

I was wondering if it was really simple to draw a chart similar to that type of chart, thanks for the answer! This is the sleep stage chart correct.

Multiple datasets are used, and the data you have is different depending on what you draw on each label.

[Udemology]

Am I correct each dataset records only 1 value at a time?
I am getting closer to the result, but the real challenge will be the rounded borders/arcs, that is based on hard coded data and assuming each dataset contains a single value.

[Udemology]

It took me 5 days to figure it out. I will make a plugin out of it. However, it comes with limitations.

1. It is based on single dataset.
2. And it should not have any value gaps or 2 bars with the same values.
3. Horizontal bars only

I know your structure is with multiple datasets. This might work if each dataset would only have a single value, to fine tune that I would need to know your datapoint info. However, see if you could squeeze the data into in single dataset.

Quick video below, but expect soon to have it as a plugin.

[gyeongtae-mo]

wow thank you so much! In the end, I succeeded in drawing it to some extent, although not completely similar... but this looks very neat.

[shahrirosm]

I'm able to draw this chart, may you share how you achieve to draw the connecting line?

[Udemology]

I lost the code of this item. I will see if I can find it. Or duplicate it in the near future.

[kku98057]

저도 제발 부탁드립니다 ㅠㅠㅠ

[Vamshireddy91]

@gyeongtae-mo @Udemology Can you please share the code pen for this example?

[kku98057]

how to create gooey Effect ?