chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
63.9k stars 11.88k forks source link

Tooltip: customize point style (like in legend plugin) #11787

Open marc-mabe opened 1 month ago

marc-mabe commented 1 month ago

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