Skip to content

Add pointStyleWidth option for legend#10412

Merged
etimberg merged 3 commits into
chartjs:masterfrom
touletan:feature-4811
Jul 18, 2022
Merged

Add pointStyleWidth option for legend#10412
etimberg merged 3 commits into
chartjs:masterfrom
touletan:feature-4811

Conversation

@touletan

@touletan touletan commented Jun 9, 2022

Copy link
Copy Markdown
Contributor

When I'm using 'usePointStyle' for legend option, I want to be able to control the width of the pointStyle for Line and Rect options. For now the width is restricted to font size.

Comment thread src/plugins/plugin.legend.js Outdated
labels: {
color: (ctx) => ctx.chart.options.color,
boxWidth: 40,
// boxWidth: default is 40,

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This would become a breaking change for users

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

default value has been transferred to getBoxSize function.
let {boxHeight = fontSize, boxWidth = 40} = labelOpts;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@touletan that is a breaking change, because that default is no longer configurable.

@touletan

Copy link
Copy Markdown
Contributor Author

What if we use a new option?

@kurkle

kurkle commented Jul 10, 2022

Copy link
Copy Markdown
Member

What if we use a new option?

Just revert the move of default value?
Nevermind, I see you already did something to that.

But the drawPoint is a public function, so change in its signature is also a breaking change.

@etimberg

etimberg commented Jul 10, 2022

Copy link
Copy Markdown
Member

I think the signature change in this case is OK since the code handles it being unset. I suppose Typescript users would see a difference if we've provided a type for this helper

@touletan

Copy link
Copy Markdown
Contributor Author

I added a new function 'drawPointLegend', so drawPoint signature is not impacted

@touletan

Copy link
Copy Markdown
Contributor Author

is there a way to ignore the codeclimate issues? The complexity of the new function is the same as it was with drawPoint.

@etimberg

Copy link
Copy Markdown
Member

is there a way to ignore the codeclimate issues? The complexity of the new function is the same as it was with drawPoint.

We can ignore it when we merge. It's not a blocker

@kurkle kurkle changed the title Use boxWidth for line and rect pointStyle in the legend Add pointStyleWidth option for legend Jul 18, 2022
@kurkle kurkle added this to the Version 3.9.0 milestone Jul 18, 2022
@etimberg
etimberg merged commit 5452502 into chartjs:master Jul 18, 2022
@touletan
touletan deleted the feature-4811 branch July 18, 2022 12:00
@0ro

0ro commented Jul 28, 2022

Copy link
Copy Markdown

@kurkle @etimberg Can you please help me with this option? I want to see 'circle' in the legend by default but I'm getting 'ellipse'. Is it a bug or expected behavior?

I'm using the next config

const config = {
  type: "line",
  data: data,
  options: {
    plugins: {
      legend: {
        labels: {
          usePointStyle: true
        }
      }
    }
  }
}

And here a link to codesadbox for your quick review of current behavior

@touletan

Copy link
Copy Markdown
Contributor Author

This pull request should be able to fix this bug:

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants