Allow border of legend not change according to the type of line in the graph
Feature Proposal
Take a look at the image below. Some legends have the border line dashed/dotted just because the line in the graph is dashed/dotted. That's nice, but it would be good to be able to disable this because sometimes the legends get really weird especially when some dataset lines are thicker than others, that makes the border line of the legend also thicker and when you have many legends, they get completely confused with each one having different border line thickness. This problem also happens when I hover a line in the graph and it gets thicker, this will make the border line of the legend to get thicker which misaligns the legends. It would be nice to disable this in order to the legends have fixed line thickness and be completely solid instead of using dashed/dotted.
Possible Implementation
No response
You can use a custom generateLabels function to achieve this:
https://jsfiddle.net/r5f37oz0/
generateLabels(chart) {
const datasets = chart.data.datasets;
const {
labels: {
usePointStyle,
pointStyle,
textAlign,
color,
useBorderRadius,
borderRadius
}
} = chart.legend.options;
return chart._getSortedDatasetMetas().map((meta) => {
const style = meta.controller.getStyle(usePointStyle ? 0 : undefined);
const borderWidth = Chart.helpers.toPadding(style.borderWidth);
return {
text: datasets[meta.index].label,
fillStyle: style.backgroundColor,
fontColor: color,
hidden: !meta.visible,
lineCap: style.borderCapStyle,
lineDash: [], // Set to empty array to disable dashed border
lineDashOffset: style.borderDashOffset,
lineJoin: style.borderJoinStyle,
lineWidth: 1, // Set this line to a single value to ignore borderWidth increasing legend border
strokeStyle: style.borderColor,
pointStyle: pointStyle || style.pointStyle,
rotation: style.rotation,
textAlign: textAlign || style.textAlign,
borderRadius: useBorderRadius && (borderRadius || style.borderRadius),
// Below is extra data used for toggling the datasets
datasetIndex: meta.index
};
}, this);
}
``
@LeeLenaleee I have no words to thank you for the code you provided, worked perfectly. However, I think this library (which is pretty good, I dont want to look ungrateful) could make it a lot easier to change the label properties instead of using generateLabels which is very convoluted and demands the user to specify not only what he wants to set but the user has to set all options to something jus to change, for example, lineDash. If I could at least only specify lineDash at the generateLabels configurtion and everything else would be kept default it would be nice too