Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
batata004 opened this issue Aug 28, 2024 · 2 comments
Open

Comments

@batata004
Copy link

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

@LeeLenaleee
Copy link
Collaborator

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);
          }
`` 

@batata004
Copy link
Author

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants