chartjs / chartjs/Chart.js

Tooltip: customize point style (like in legend plugin)

Open
#11,787 0 comments 2 reactions 0 assignees View on GitHub
type: enhancement
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.