Tooltip: customize point style (like in legend plugin)
- Dominant language
- JavaScript
- Stars
- 67.7k
- Forks
- 11.9k
- Avg merge
- 7h 39m
- Merged PRs (30d)
- 5
Description
### Feature Proposal
I want to customize the legend and tooltip icons to be rendered as a line instead of rectangle.
For the legend plugin this works fine with `usePointStyle=true` together with a custom `generateLabels` doing something like this:
```
if (dataset.type === 'line') {
const defaultLineOpts = Chart.defaults.elements.line;
labelItem.pointStyle = 'line';
labelItem.rotation = 0;
labelItem.lineWidth = get(dataset, 'borderWidth', defaultLineOpts.borderWidth);
labelItem.lineDash = get(dataset, 'borderDash', defaultLineOpts.borderDash);
labelItem.lineJoin = get(dataset, 'borderJoinStyle', defaultLineOpts.borderJoinStyle);
labelItem.lineCap = get(dataset, 'borderCapStyle', defaultLineOpts.borderCapStyle);
labelItem.lineDashOffset = get(dataset, 'borderDashOffset', defaultLineOpts.borderDashOffset);
} else {
labelItem.pointStyle = 'rect';
}
```
Unfortunately for the tooltip plugin this does not work :/
I can set `usePointStyle=true` and defined a custom `callbacks.labelPointStyle` but I can only return an object of `{ pointStyle: PointStyle; rotation: number }`.
This way I get a line rendered but I didn't find any way define the line width or build dotted lines which makes the chart tooltip useless if you have a chart with multiple lines of similar colors differentiated by line style (like dotted lines).
In `_drawColorBox` `border[Width|Color|Dash|DashOffset]` is used only if `usePointStyle=false`.
In my opinion (without knowing very much about your code structure) it would be beneficial for users and reduce code complexity if both (legend and tooltip) plugins would share the same logic to render customized icons and therefor share the same configuration options to do so.
Thanks :)
### Possible Implementation
_No response_
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.