How to make pointHitRadius a rectangle

[samcov]

I can't find the documentation for pointHitRadius as an array anywhere, a simple number, yes, but nothing else.

I want to make the hit radius a rectangle as shown in the picture. I see that it can be described as an array like this,
pointHitRadius: [0,0,0,0,20], but I don't know what the data in the array represents. Any help would be appreciated.

[Udemology]

Hi Samcov,

An array for the pointHitRadius will specify the size in pixels of each datapoint's pointHitRadius.

In your case with [0,0,0,0,20] this would indicate that the first 4 items would have an pointHitRadius of 0px and the last one would have an pointHitRadius of 20px.

By default a bar chart has a rectangle shape pointHitRadius. While it is not clear what chart type you use but I suspect a line chart. For a line chart you could assign the pointstyle into a specific shape. That will automatically align it.

    usePointStyle: true,
    pointStyle: 'rect', // or other shapes
    pointRadius: 20

If you try to build like a button/custom option in that case you could create a tiny function that would make it work. But some more information would be needed before going this route.

[samcov]

Ok, you gave me a LOT of clarity, the pointHitRadius is not what I thought it was.

However, your suggestion of a function sounds like an excellent option. It sounds like a function would allow me to draw whatever I needed, like the rectangle for each point, likely using the context.

BTW, I'm using a scatter chart. Do you know of any examples of using a function to draw?

[Udemology]

Just to give you a heads up. Always go for the first option as it is easier than drawing yourself.

Drawing and making own functions in canvas is a mind twister. This video will help you out with a basic shape: https://youtu.be/HD0t9HvoJHg

If you need a simple rectangle/square + tooltip function. Maybe better is to show a sample what you have in mind. I will check if I can create something similar to that.

[samcov]

Yes, I'm using AfterDraw already, and from there I can do anything I want.

I built an entire drag and drop organizational chart using Chart.js by drawing the objects myself, moving them around, and adding align tops/bottoms and distribute objects, so Canvas drawing isn't hard for me.

For this project I wanted to see if I could use Chart.js and save some coding, since I've got everything working, but using the drag plugin only gets me a small area, so I wanted to make the hit radius be the size of the rectangle I need.

This is a rough draft where I draw a rectangle, I do want them bigger and the text inside, but I want the hit/hover radius to be the shape of the rectangle, and I can't see how to make that happen.

[Udemology]

First of all nice design. I hope to make something like that one.

I have been looking and notice that it is slightly harder than I suspected. I thought the code below would work as it would check if the cursor is within the rectangle and if so trigger tooltip. It does trigger but you need to keep on moving the mouse to see the tooltip clearly, see code below. Perhaps a someone knows why this is the case.

Alternative?
Looking closer at this, since you are using scatter charts. There is a way I suspect to do a custom pointStyle: https://www.chartjs.org/docs/latest/configuration/elements.html#point-styles. However, how to do this is not clear. If a custom shape is allowed, I would love to know how as it allows HTMLCanvasElement

Types
The pointStyle argument accepts the following type of inputs: string, Image and HTMLCanvasElement

https://www.chartjs.org/docs/latest/configuration/elements.html#info

`
myChart.canvas.addEventListener('mousemove', (e) => {
showTooltip(myChart, e);
});

function showTooltip(chart, mousemove){

  const { ctx, scales: {x, y} } = chart;

  const xCoor = mousemove.offsetX;
  const yCoor = mousemove.offsetY;

  if(xCoor >= x.getPixelForValue(1) && xCoor <= x.getPixelForValue(5) && yCoor >= y.getPixelForValue(5) && yCoor <= y.getPixelForValue(1) ) {
    console.log('ok');
    chart.tooltip.setActiveElements([
      {datasetIndex: 0, index: 0}
    ]);
  } else {
    chart.tooltip.setActiveElements([], {x: 0, y: 0});
  }
};`

[samcov]

You are actually VERY close to a possible solution if it's performant!!!

"The pointStyle argument accepts the following type of inputs: string, Image and HTMLCanvasElement"

That being the case, it's possible to place a canvas element at each point & draw whatever you like!!!

I've seen code to do that with an image, so it's likely the same, I just have to find that code again, LOL!!!

Good Find!

[Udemology]

If you have found the answer on HTMLCanvasElements please let me know as well how you did it. I have tried to figure that one out for a while but could not find a way to get it to work. I would love to know this little gem as well. I will try to explore it myself again as well.

[samcov]

I will let you know as soon as I can get back to it!

[samcov]

I hope this comes through, but here is a very simple example of changing the point style to an image or a canvas, and drawing on the canvas. I use the drag plugin to be able to drag points around. Oh, I just saw I can add the files, so see the zip.

It's so simple you can just double click on the html file and it shows in the browser.

However, the bigger point is that you can create the canvas of any size and draw on it, or call GetImage() to use it as the points.

ChartJS Draggable Demo.zip
w

[Udemology]

Hi Samcov, thank you so much for this. I will be exploring this more in depth.

While it looks so simple, I would have never been able to figure it out. It opens a lot of new options. I will be enjoying this treasure trove.

[samcov]

No problem and you're right, it opens up new opportunities to do interesting things with chart.js!

But it was you that pointed me in the right direction to figure it out, so thanks for that!