plotly / plotly/plotly.js

enable control of rendering order in stacked area charts (line colors)

Open
#6,579 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature P3
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

I am plotting a stacked area chart showing (positive y side) power consumption "from grid" (red) and "from solar" (orange) - in this order. Note that on the left-hand side of the chart, (non-zero red and zero orange), the red area is has an orange outline. While it is reasonable, taking into account that red area is rendered before orange, it is not visually appealing and can be confusing to the user.

Screenshot_2023-04-23_11-17-22

A preferred solution would be to somehow render the chart top-down (I do realize that both the stacking mechanism and tonexty fill currently depend on a bottom-up rendering order). In the example above, that would allow red outlines to be rendered last, covering zero areas above them.

I am using Plotly Graph Card for Home Assistant, so I do not have a JS code to include. I can provide source YAML code if that helps.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the stacked area chart from the screenshot, using the linked Plotly Graph Card context and source YAML if provided. Read the stacked area rendering and tonexty fill behavior first; done means a controllable rendering order that improves zero-area outlines without breaking stacking.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.