Tooltip Trigger Radius and Logarithmic x-axle labels

[pleinx]

Notice for Issue labels: Version Charts.js 2-Beta2

Hey guys,

i'm using a Scatter-Chart as Bar-Chart because we need logarithmic on x-Axle.
thats working already fine!

1) Tooltip Trigger
Yes, sure. Its still a scatter and the dots trigger the tooltips. But i found in examples and docs two-three things they may can help me but i dont know the position which i have to set these options.

1. from samples/line-customTooltips.html
   Chart.defaults.global.pointHitDetectionRadius = 1000;
2. from http://nnnick.github.io/Chart.js/docs-v2/

point.radius
point.hitRadius

My idear was to set a higher radius on the points (which we later set to opacity:0) to have an bigger trigger-radius for the tooltips. Maybe some have a better solution or can help me why did these parameters works? I have enable the points to show you the main-triggers.

Demo of Bar-Log-Chart

2) Logarithmic x-Axle Labels Question UPDATED
notice: jsFiddle is not for this question!

I try to set min/max on the logarithmic x-Axle.

ticks: {
  min: 20,
  max: 20000,
 ...
}

It works not perfect. 20 on the start is working but the 20k label doesnt displayed.
Next problem is that the first area stick on the y-Axle line.
Here is an example: http://fs5.directupload.net/images/160225/mqpijnjr.png

Thanks in advance!

[pleinx]

Okay for Question 1) i have now the correct position found ;-)

new Chart.Scatter(ctx, { data: scatterChartData, options: { responsive: true, elements: { point: { radius: 100, hitRadius: 100 } },...

elements: { ... } was the solution. I will play a little bit with these parameter. But if anyone have a better idear to realize this, please help me :)

[etimberg]

Regarding question 2, this look like a bug. The last label should be displayed always.

[pleinx]

Hey,

i build a small workaround to fix it: https://jsfiddle.net/pleinx/7vr0uvsm/

After set min to 19.9 and max to 16000, it will work!
So i override now the "19.9 Hz" label with "20 Hz" label because in our case its not necessary (at this time => the 0.1 Hz). Maybe someone will help this.

For Question 1)
Any idear how center the tooltips each "bar" means dataset[0] => data[0] && data [1] ?
The trigger is okay with "hitRadius: 35" but i would be nice if the tooltip will be displayed in the center of a "bar".

New Question:
Is it possible to set hitRadius for each dataset or better data? I would be nice because then i can better calculate the perfect radius of each "bar" to trigger the tooltips.

[etimberg]

You can definitely set the hit radius per dataset and per individual point.

In the dataset object, add a hitRadius field. If the value of that field is a number it is used for all points in the dataset. If the value is an array, the first value in the array is used for the first point, the second value for the second point, etc.

[pleinx]

Hey @etimberg,

alright this works very nice! Thank you for this.

I've added now a 3. point which shows the middle of a faked-bar.
Example here: https://jsfiddle.net/pleinx/7vr0uvsm/ (dirty quick version!)
Please set hidePoints = false;

I think there is bug, if you resize (using responsive) the chart (window) the hitRadius do not adjust the new deminsions :-/

[etimberg]

@pleinx sorry for the late reply. The hit radius would need to be re-calculated on resize since it is specified in screen coordinates (pixels) and not in data coordinates.

[etimberg]

@pleinx I know this is an old issue, but I have good news. With the work that was done in #3400, this is fixed.

We added a new 'nearest' mode along with a parameter, intersect, that allows triggering tooltips even when you're not intersecting the points. Using these together means you no longer need to juggle the hit radii. You can also define your own modes by adding handler functions to the Chart.Interaction.modes map and then setting the mode setting to the key you used.

Config

options: {
  tooltips: {
    mode: 'nearest',
    intersect: false
  }
}

In Action

[pleinx]

@etimberg Thanks! i'll test it :)
Nice support!