How to make such a schedule?

Hello!

Tried to do this graph on the canvas but was faced with the problem of catching mouse events on the canvas. When you hover over the point you want to display the date to which this point is:

5cf42e420a21c985590798.jpeg

How to make a schedule without crutches?

In advance I Express my deep gratitude to all who help!
March 23rd 20 at 18:49
1 answer
March 23rd 20 at 18:51
Use ready-made libraries:
https://www.chartjs.org/ (More simple)
https://d3js.org/ (More complex)

You have quite a simple plot, no sense to write something specific to its implementation.
Well, except that purely for practice, but that's another story)
Thanks for the reply. But in your libraries graphs look different. I need to strictly follow the design - isaias_Rat commented on March 23rd 20 at 18:54
@isaias_Rat, man. you have a good point. a turnkey solution. kastomiziruet under its design, if not from the Guild of typographical that TK is adjusted for copy-paste - talia25 commented on March 23rd 20 at 18:57
@talia25, I understand that you can simply customize the design. But I have no idea how to do it in the case of canvas. If would just be SVG or HTML, which through CSS you can change, then the problem would have been solved long ago. As far as I know, there appearance will need to change with the JS library, but I could be wrong. - isaias_Rat commented on March 23rd 20 at 19:00
@isaias_Rat, see the documentation of the same chart.js there's more raspisano.
Setup will look something like this:
let chart = new Chart(ctx, {
 type: 'line',
 data: data,
 options: {
 layout: {
 padding: {
 left: 50,
...
},
},
 colors: {
...
}
}
});
- Shakira_Leannon commented on March 23rd 20 at 19:03

Find more questions by tags JavaScript