Chart.js icon indicating copy to clipboard operation
Chart.js copied to clipboard

Allow border of legend not change according to the type of line in the graph

Open batata004 opened this issue 1 year ago • 2 comments

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.

image

Possible Implementation

No response

batata004 avatar Aug 28 '24 03:08 batata004

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 avatar Sep 02 '24 18:09 LeeLenaleee

@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

batata004 avatar Sep 03 '24 03:09 batata004