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 conditional colouring for lines in bidimensional line graphs #3604

Closed
1 task done
KaelanFrey opened this issue Sep 2, 2021 · 1 comment
Closed
1 task done

Comments

@KaelanFrey
Copy link

KaelanFrey commented Sep 2, 2021

  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

The end user should be able to see a single line graph with different colours depending on a line segment's starting Y value.

What does the proposed API look like?

Usage example, if we wanted to colour depending on a Y value called "value", pivoted by a "date":

const lineView = chart.createView({
                padding: 32
            });
            lineView.data(data.lineData);
            lineView.scale('value', {
                alias: 'Value'
            });
            lineView.line()
                .position('date*value')
                .color('_*value', (_,v) => v > 40000 ? 'green' : 'red');

That would create a view where each line that would start on a point with a value higher than 40000 would be green, or red if not.
This is exactly how points handle colouring, but the same logic is not applicable to lines.

EDIT: Currently, calling .color like that will colour the whole line depending on the value of the last value. It should be possible to colour segments of the line. A final example would be something like this:
Screenshot 2021-09-02 at 17 20 19

@hustcc
Copy link
Member

hustcc commented Oct 8, 2021

Drawing a line with a single path, so can not set the color for different path.

You can use chart.annotation to finish your work. see the demo https://g2.antv.vision/zh/examples/component/annotation#guide-region-filter1

@hustcc hustcc closed this as completed Oct 8, 2021
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

No branches or pull requests

2 participants