Skip to content

add stroke properties to discrete color legend (#860)#994

Merged
mcnuttandrew merged 2 commits into
uber:masterfrom
Wattenberger:discrete-color-legend-stroke-styles
Oct 8, 2018
Merged

add stroke properties to discrete color legend (#860)#994
mcnuttandrew merged 2 commits into
uber:masterfrom
Wattenberger:discrete-color-legend-stroke-styles

Conversation

@Wattenberger

Copy link
Copy Markdown
Contributor

Added the ability to set stroke properties (strokeDasharray, strokeStyle, strokeWidth) of Discrete Color Legend items to match Line Series components. At first I considered mimicking the colors attribute and letting users add a strokeWidths array, but it seemed to over-complicate the api, so I settled with grabbing those properties from an item's object.

The legend items now render an svg path instead of a 2x14px div, which was necessary to match the dash-array property, but it also might help keep the legend consistent with the chart.

I edited one of the legend examples to show the implementation - happy to remove it if it's too heavy-handed.

image

Happy to hear any feedback, thanks!

strokeDasharray, strokeStyle, strokeWidth

@mcnuttandrew mcnuttandrew left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

You are on fire! I think this is a fine solution to this problem. Would you mind adding a test to support this change?

update tests to use svg properties, add tests for stroke dasharray and stroke width, and filter out unused styles
@Wattenberger

Copy link
Copy Markdown
Contributor Author

Oh shoot! Tests, of course!

I updated the tests to match the svg styles/elements and added stroke-width and stroke-dasharray tests. Thanks for the speedy response!

@mcnuttandrew

Copy link
Copy Markdown
Contributor

Looks good! Thanks again

@mcnuttandrew mcnuttandrew merged commit 1d350bb into uber:master Oct 8, 2018
ayarcohaila pushed a commit to ayarcohaila/react-vis that referenced this pull request Jun 30, 2021
* add stroke properties to discrete color legend (uber#860)

strokeDasharray, strokeStyle, strokeWidth

* update tests for discrete color legend

update tests to use svg properties, add tests for stroke dasharray and stroke width, and filter out unused styles
ayarcohaila added a commit to ayarcohaila/react-vis that referenced this pull request May 30, 2023
* add stroke properties to discrete color legend (uber#860)

strokeDasharray, strokeStyle, strokeWidth

* update tests for discrete color legend

update tests to use svg properties, add tests for stroke dasharray and stroke width, and filter out unused styles
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants