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 styling of line segments #8844

Merged
merged 9 commits into from Apr 8, 2021

Conversation

kurkle
Copy link
Member

@kurkle kurkle commented Apr 7, 2021

Alternative implementation

Closes #7523
Closes #7193
Closes #5956
Closes #4895
Closes #4434

TODO

  • slope styling
  • gap styling
  • x/y range styling
  • documentation
  • samples
  • types

@kurkle kurkle marked this pull request as draft April 7, 2021 16:45
Gap styling

range styling

cache reset

Allow styling of line segments
@kurkle
Copy link
Member Author

kurkle commented Apr 7, 2021

Filename Size Change
dist/chart.esm.js 68.3 kB +92 B (0%)
dist/chart.js 86.7 kB +432 B (+1%)
dist/chart.min.js 61.8 kB +326 B (+1%)
dist/chunks/helpers.segment.js 19.4 kB +322 B (+2%)

Copy link
Member

@etimberg etimberg left a comment

Choose a reason for hiding this comment

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

I like where this is going

@kurkle kurkle marked this pull request as ready for review April 8, 2021 07:26
docs/charts/line.md Outdated Show resolved Hide resolved
@kurkle kurkle requested a review from simonbrunel April 8, 2021 11:01
etimberg
etimberg previously approved these changes Apr 8, 2021
@stockiNail
Copy link
Contributor

I really like this PR. Great!
I think there are some use cases where the backgroundColor (to fill the dataset segment) would be needed and defined by segment.
Maybe scope for another PR.

@kurkle
Copy link
Member Author

kurkle commented Apr 8, 2021

I really like this PR. Great!
I think there are some use cases where the backgroundColor (to fill the dataset segment) would be needed and defined by segment.
Maybe scope for another PR.

Needs changes in the filler plugin. I think its better done separately.

@stockiNail
Copy link
Contributor

Needs changes in the filler plugin. I think its better done separately.

Fully agree.

Copy link
Member

@simonbrunel simonbrunel left a comment

Choose a reason for hiding this comment

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

Already agreed on the 'scriptable' approach on Slack (I didn't look deep in the implementation).

docs/charts/line.md Outdated Show resolved Hide resolved
@kurkle kurkle added this to the Version 3.1 milestone Apr 8, 2021
@etimberg etimberg merged commit 4eb5945 into chartjs:master Apr 8, 2021
@defunctzombie
Copy link
Contributor

👍 Looking at the docs for the feature I see that I can specify segment overrides as scriptables. Does the feature also support setting a different borderColor per data point within the data array? My use case for this is twofold:

  1. I render in a worker so need to send structurally-clonable data and options to the chart (no functions)
  2. When I build the dataset for the chart, I want to look-back at the previous value and change color when there is a specific difference between values. Since I iterate my raw input data to build the chartjs dataset - being able to specify borderColor per data point (in an array alongside the data points?) would be sufficient.

@kurkle kurkle deleted the line-segments-scriptable branch May 30, 2021 05:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment